需求是基于微信的一个活动,需要在 app 和小程序端生成带二维码的图片,生成图片是为了让用户可以发到朋友圈。然后用户长按带二维码的图片就可以进入到小程序了。

浏览器端

html2canvas

html2canvas是一个可以把 dom结构转成图片的浏览器端的 js 库
**

drawLaTex

https://github.com/leeenx/drawLaTex
使用MathJax来渲染LaTex公式。

dom-to-image

https://github.com/tsayen/dom-to-image

**

后端

可以让后端 php、java 等在服务端进行图片拼接,然后把组合后的图片地址给到前端。
优点是可以做到通用,小程序、app等其他端都可以调用同一个图片接口。
缺点是服务端处理简单图片文字拼接可以,但是如果是针对一个复杂的网页布局可能就有点力不从心了。

小程序端

例如微信小程序官方提供了canvas 的相关文档调用说明,也可以通过计算坐标的方式把图片和文字画上去。然后把canvas保存成图片,再下载到用户手机。
此方案和后端生成差不多。

phantomjs

phantomjs 是一个运行在服务端的无界面的浏览器。
PhantomJS是一个基于webkit的JavaScript API。它使用QtWebKit作为它核心浏览器的功能,使用webkit来编译解释执行JavaScript代码。任何你可以在基于webkit浏览器做的事情,它都能做到。它不仅是个隐形的浏览器,提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等,同时也提供了处理文件I/O的操作,从而使你可以向操作系统读写文件等。PhantomJS的用处可谓非常广泛,诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。
需要在服务端进行截屏,所以还需要一个可以访问的h5页面,另外页面必须是服务端渲染,最好不要用js渲染,截图可能有问题。

另外一个在服务端的字体需要预先设置,比如微软雅黑、 华文苹方 服务器上如果没有就需要进行安装。不然截图的字体和你的效果图不一致。

优点: 服务端截屏,可以做成通用的服务。
缺点: 会增加前端同学的工作量,因为需要做服务,还需要做 h5 页面布局。当然也看怎么设计架构,如果足够通用也只需要写一次就够了。剩下的就是做 h5 页面了,这个就快多了。

前端图片压缩方案

只有canvas可以对图片进行压缩处理。
原理大概就是:
1、先将图片的file文件转成baseURL

  1. /**
  2. * @param {二进制文件流} file
  3. * @param {回调函数,返回base64} fn
  4. */
  5. function changeFileToBaseURL(file,fn){
  6. // 创建读取文件对象
  7. var fileReader = new FileReader();
  8. //如果file没定义返回null
  9. if(file == undefined) return fn(null);
  10. // 读取file文件,得到的结果为base64位
  11. fileReader.readAsDataURL(file);
  12. fileReader.onload = function(){
  13. // 把读取到的base64
  14. var imgBase64Data = this.result;
  15. fn(imgBase64Data);
  16. }
  17. }

将base64转化为文件流

  1. /**
  2. * 将base64转换为文件
  3. * @param {baseURL} dataurl
  4. * @param {文件名称} filename
  5. * @return {文件二进制流}
  6. */
  7. function dataURLtoFile(dataurl, filename) {
  8. var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
  9. bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  10. while(n--){
  11. u8arr[n] = bstr.charCodeAt(n);
  12. }
  13. return new File([u8arr], filename, {type:mime});
  14. }

2、创建一个image标签去接收文件获取图片的宽高和比例。
3、创建canvas画布设置画布的大小。
4、将图片绘制到canvas上面。
5、对canvas进行压缩处理,获得新的baseURL

  1. /**
  2. * canvas压缩图片
  3. * @param {参数obj} param
  4. * @param {文件二进制流} param.file 必传
  5. * @param {目标压缩大小} param.targetSize 不传初始赋值-1
  6. * @param {输出图片宽度} param.width 不传初始赋值-1,等比缩放不用传高度
  7. * @param {输出图片名称} param.fileName 不传初始赋值image
  8. * @param {压缩图片程度} param.quality 不传初始赋值0.92。值范围0~1
  9. * @param {回调函数} param.succ 必传
  10. */
  11. function pressImg(param){
  12. //如果没有回调函数就不执行
  13. if(param && param.succ){
  14. //如果file没定义返回null
  15. if(param.file == undefined) return param.succ(null);
  16. //给参数附初始值
  17. param.targetSize = param.hasOwnProperty("targetSize") ? param.targetSize : -1;
  18. param.width = param.hasOwnProperty("width") ? param.width : -1;
  19. param.fileName = param.hasOwnProperty("fileName") ? param.fileName: "image";
  20. param.quality = param.hasOwnProperty("quality") ? param.quality : 0.92;
  21. var _this = this;
  22. // 得到文件类型
  23. var fileType = param.file.type;
  24. // console.log(fileType) //image/jpeg
  25. if(fileType.indexOf("image") == -1){
  26. console.log('请选择图片文件^_^');
  27. return param.succ(null);
  28. }
  29. //如果当前size比目标size小,直接输出
  30. var size = param.file.size;
  31. if(param.targetSize > size){
  32. return param.succ(param.file);
  33. }
  34. // 读取file文件,得到的结果为base64位
  35. changeFileToBaseURL(param.file,function(base64){
  36. if(base64){
  37. var image = new Image();
  38. image.src = base64;
  39. image.onload = function(){
  40. // 获得长宽比例
  41. var scale = this.width / this.height;
  42. // console.log(scale);
  43. //创建一个canvas
  44. var canvas = document.createElement('canvas');
  45. //获取上下文
  46. var context = canvas.getContext('2d');
  47. //获取压缩后的图片宽度,如果width为-1,默认原图宽度
  48. canvas.width = param.width == -1 ? this.width : param.width;
  49. //获取压缩后的图片高度,如果width为-1,默认原图高度
  50. canvas.height = param.width == -1 ? this.height : parseInt(param.width / scale);
  51. //把图片绘制到canvas上面
  52. context.drawImage(image, 0, 0, canvas.width, canvas.height);
  53. //压缩图片,获取到新的base64Url
  54. var newImageData = canvas.toDataURL(fileType,param.quality);
  55. //将base64转化成文件流
  56. var resultFile = dataURLtoFile(newImageData,param.fileName);
  57. //判断如果targetSize有限制且压缩后的图片大小比目标大小大,就弹出错误
  58. if(param.targetSize != -1 && param.targetSize < resultFile.size){
  59. console.log("图片上传尺寸太大,请重新上传^_^");
  60. param.succ(null);
  61. }else{
  62. //返回文件流
  63. param.succ(resultFile);
  64. }
  65. }
  66. }
  67. });
  68. }
  69. }

6、将baseURL转化回文件。

参考资源

http://phantomjs.org/
http://www.cnblogs.com/bangejingting/p/6907628.html
https://yq.aliyun.com/articles/53969