HTML5 Canvas画图、保存图片、提交文件问题

编辑：admin 时间：2018-07-17

需求：

实现在线图片编辑，为原图片添加角标。
解决方案
添加Canvas

首先判断Canvas是否存在，如果不存在则创建Canvas对象。具体代码如下：

其中需要说明的是

1、Canvas的宽高不需要加单位（单位为像素），其宽高默认为300*150。

2、Canvas的宽高跟CSS的宽高不是一回事，不可混淆。

3、drawImage函数中的位置参数都是以像素为单位的，画图中需要考虑画图位置、大小和Canvas边界。

img1是角标图片，其位置通过用户选择映射为不同的参数，具体代码如下：

此处要留意两个问题，分别是：

1、globalCompositeOperation设置，此处用到destination-over（新图象在下）、source-over（新图像在上）两个参数。

2、我们采用的图片来自不同的网站，存在跨域问题，需要设置图片允许跨域。具体设置属性为crossOrigin，参数为anonymous。

代码如下：

其中

toDataURL函数是HTML5 Canvas对象的方法，可以将Canvas保存为Base64编码的图片。返回结果是一串Base64的编码。
convertBase64UrlToBlob函数将图片的Base64编码转化为blob文件对象。

最后将文件提交：

其流程为根据原文件表单获取Formdata，将新文件赋值给Formdata对象，使用Ajax提交Formdata数据。
PS：Formdata的set方法是设置key、value。其他还有很多API具体Google或百度。

Over！

上文中将Canvas保存为图片文件的程序转化后的文件会比图片原来的文件大很多，例如10KB的jpg图片转换后会变为大概80KB，对于文件上传有大小限制的情景不适用。
我又找到新的转换方式，具体code如下：

其中toBlob的第一个参数是回调函数，转换完成后调用。第三个参数是图片质量，更像压缩比，进行适当的压缩可以在图片质量降低不多的情况下，最大限度的减小图片存储大小。注意：转换需要过程，回调函数是个异步的过程。

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

回复列表