新闻详情

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

2018-07-172706

需求:

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

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


其中需要说明的是

1、Canvas的宽高不需要加单位(单位为像素),其宽高默认为300*150。

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

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


下面在Canvas中画图

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




此处要留意两个问题,分别是:

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

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


将Canvas保存为图片文件

代码如下:



其中

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


最后将文件提交:


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

Over!


9月6日更新:

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


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



相关新闻相关新闻

热门评论热门评论

评论评论