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将单一的图片合成如上群头像. 在一个正方形外框中,要将多个图片合成上述图片.首先要做的是,依据圆相交的程度,计算圆心坐标与图片间空白区域 ...
随机推荐
- 单机部署 ELK
对于一个体量不大的系统,运行在单机上的 ELK 就足以胜任日志的处理任务了.本文介绍如何在单台服务器上安装并配置 ELK(elalasticsearch + logstash + kibana),并最 ...
- core dump文件的生成
#include <stdio.h> int main(int argc, char *argv[]) { char * p = "abcdefg"; p[] = '; ...
- 阿里云 轻量应用服务器(LAMP) 使用日志记录
phpStudy(PHP运行环境一键安装包) https://www.jb51.net/softs/182860.html 0:PHP开发工具 https://netbeans.org/downloa ...
- 磁盘IO的性能指标 阻塞与非阻塞、同步与异步 I/O模型
磁盘IO的性能指标 - 蝈蝈俊 - 博客园https://www.cnblogs.com/ghj1976/p/5611648.html 阻塞与非阻塞.同步与异步 I/O模型 - 蝈蝈俊.net - C ...
- 【转】深入分析 Parquet 列式存储格式
Parquet 是面向分析型业务的列式存储格式,由 Twitter 和 Cloudera 合作开发,2015 年 5 月从 Apache 的孵化器里毕业成为 Apache 顶级项目,最新的版本是 1. ...
- sql中的 IF 条件语句的用法
IF 表达式 IF( expr1 , expr2 , expr3 ) expr1 的值为 TRUE,则返回值为 expr2 expr1 的值为FALSE,则返回值为 expr3 如下: SELECT ...
- 题解:[APIO/CTSC 2007]数据备份
你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽享计算机游戏的乐趣.已 ...
- jforum(1)--环境搭建
JForum 是采用Java开发的功能强大且稳定的论坛系统.它提供了抽象的接口.高效的论坛引擎以及易于使用的管理界面,同时具有完全的权限控制.多语言支持(包括中文).高性能.可自定义的用户接口.安全. ...
- sopUI上手教程
1.新建项目 File-->New SOAP Project-->Project Name:填入项目名 Initial WSDL:填入项目的 web Services 2.添加WSDL ...
- 前端ajax请求百度地图api
$.ajax({ type: "get", url: 'http://api.map.baidu.com/place/v2/search', data:{ ak:'您的ak', q ...