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)
canvas图片合成中的坑的更多相关文章
- JS 水印图片合成实例页面
CSS代码: .clip { position: absolute; clip: rect(0 0 0 0); } HTML代码: <input type="file" id ...
- 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)
这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...
- Canvas 实现图片合成并下载合成图片
现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...
- Html5 Canvas 实现图片合成
多个图片合成一张 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- Android DIY之路 (一) 指定区域多图片合成 放大 缩小 镜像 旋转 等(转)
惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...
- vue + canvas 图片加水印
思路:将两张图片绘制为一张 目标:输入的文字,绘制到图片上,简单实现图片水印 效果:输入的文字1: ‘你猜猜’ + 图片2 = 图片3(不要看清除水印的按钮,本人垃圾 没实现) 选择图片 html & ...
- canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...
- android 文字图片合成
引用:http://blog.csdn.net/cq361106306/article/details/8142526 两种方法: 1.直接在图片上写文字 String str = "PIC ...
- Java图片处理(一)图片合成
如何将多个头像合成类似QQ的群头像? 如上图所示,如何用java将单一的图片合成如上群头像. 在一个正方形外框中,要将多个图片合成上述图片.首先要做的是,依据圆相交的程度,计算圆心坐标与图片间空白区域 ...
随机推荐
- IDEA远程调试监控端口
大家知道,线上环境定位问题不是那么简单的,如果有非常完善的日志以及监控系统是不必担心的,但是应对这些并不完善的场景下,IDEA提供了一种远程调试的功能,remote集成了可以远程调试的功能,只需要在你 ...
- python 枚举Enum
常量是任何一门语言中都会使用的一种变量类型 如 要表示星期常量,我们可能会直接定义一组变量 JAN = 1 TWO = 2 ... 然后在返回给前端的时候,我们返回的就会是1,2,...这种魔法数字, ...
- DP求树的重心
#include<iostream> #include<stdio.h> #include<string.h> #include<algorithm> ...
- PS快速祛除脸上小雀斑
首先我们要把图片放到PS软件中,然后在PS左侧工具栏中找到污点修复画笔工具(J), 配合着污点修复画笔中的修补工具一起使用,注意:模式要选择正常,属性栏中类型要选择内容识别. 下一步我们需要在图层上添 ...
- CRM专业术语
客户关系管理(管理学词汇CRM)_百度百科https://baike.baidu.com/item/%E5%AE%A2%E6%88%B7%E5%85%B3%E7%B3%BB%E7%AE%A1%E7%9 ...
- vue2.0里的路由钩子
路由钩子 在某些情况下,当路由跳转前或跳转后.进入.离开某一个路由前.后,需要做某些操作,就可以使用路由钩子来监听路由的变化 全局路由钩子: router.beforeEach((to, from, ...
- Visual Studio Code常用设置及快捷键
1. Visual Studio Code常用设置 { // 控制是否显示 minimap(缩略图) "editor.minimap.enabled": false, // 控制折 ...
- VMware Workstation 10序列号:
VMware Workstation 10序列号:1Y0LW-4WJ9N-LZ5G9-Z81QP-92PN7
- vue2.0实现过滤
vue1.0和vue2.0差别还是挺多的,之前的vue1.0还有过滤器功能,到了2.0过滤器只能通过自己编写.以下是写的一个小demo: HTML <div id="app" ...
- P4610 [COCI2011-2012#7] KAMPANJA
题目背景 临近选举,总统要在城市1和城市2举行演讲.他乘汽车完成巡回演讲,从1出发,途中要经过城市2,最后必须回到城市1.特勤局对总统要经过的所有城市监控.为了使得费用最小,必须使得监控的城市最少.求 ...