canvas图片合成中的坑
需求
要用代码来实现多张外部图片和文字的合并而且要上传到七牛云，再将图片链接通过客户端分享出去。图片背景需要支持用户自定义更换。
实现方案
在一个canvas上多次调用drawImage函数，分别绘制在canvas中，多次之后canvas中是多个图片合并的效果，然后再调用toDataURL函数将canvas转成dataURL格式的图片，再将dataURL格式装换为blob文件，上传至七牛云。
需要注意的坑
canvas图片合成模糊的问题
将canvas的长宽设为样式长宽的2倍或更大， 如下：
var canvas = document.getElementById("myCanvas");
canvas.width = "600";
canvas.height = "600"
canvas.style.height = "300px"
canvas.style.height = "300px"
报安全性错误
如果你的图片url和页面不在同一域下，在调用toDataURL函数的时候就会报安全性错误。chrome中：
Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
Safari中貌似更严格，根域名相同子域不同依然会报错：
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
原因：
上海Web培训机构小编觉得分析问题出现的原因胜过作对任何成功的案例，这一点是canvas 图片合成重中之重。没有CORS授权虽然可以在 canvas 中使用图像, 但这样做就会污染(taints)画布。 只要 canvas 被污染, 就不能再从画布中提取数据, 也就是说不能再调用 toBlob(), toDataurl(/81014/cooperation/pentest/) 和 getImageData() 等方法, 否则会抛出安全错误(security error).这实际上是为了保护用户的个人信息,避免未经许可就从远程web站点加载用户的图像信息,造成隐私泄漏。
解决方法：
这里上海Web培训机构觉得是重点部分，所以也带了代码。为每个图片创建一个新的img对象，再赋给其src等参数，用这种方式要等到img加载完毕再进行canvas其他操作，在img的load事件处理函数中进行操作，否则可能会绘制出空内容。
let img = new Image()
img.setAttribute('crossorigin', 'anonymous')
img.src=imgUrl
img.onload = function () {
// do Something
}
img.error = function () {}
canvas 图片合成，在mac和pc的浏览器上运行正常，但是在ios11以下的手机内无法toDataURL
解决办法1：
改变图片的载入方式，先在DOM上新建img标签，如下：
注意：crossOrigin="Anonymous"一定要在src属性前面
利用js获取img元素
var img = document.getElementById('bgImg')
ctx.drawImage(img, 0, 0, 700, 700)
canvas.toBlob() safari上无效
解决办法2：
将canvas使用toDataURL方法转为base64,再将base64通过file API 转为 blob
function dataURLtoBlob (dataurl) { // 将dataUrl 转为 Blob
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
}var resultBase64 = canvas.toDataurl('/81014/cooperation/pentest/image/jpeg') // 转为jpeg压缩图片大小var canvasBlob = dataURLtoBlob(resultBase64)
