canvas如何实现多张图片编辑的图片编辑器分享!

前言

图片编辑器虽然是图片涂鸦工具,但是在当前疫情的大背景下,该工具还可以成为老师在线修改学生提交的家庭作业的工具使用的,它可以极大地减轻了老师的批改作业的工作负担,相信这软件是有市场的。 本次不具体介绍canvas的各种操作画布的api,而且相信大家在网上能搜到大量的关于canvas涂鸦的开源代码,即使是这样,我也相信真正把canvas涂鸦用于公司实际的项目的不多,改装成图片编辑器的会更少,而用于多张图片编辑然后多张统一保存、上传的更是寥寥无几。下面,我将在我曾经写过的一个canvas涂鸦的基础上,将多张图片编辑器的开发和思考过程记录下来。

图片编辑器产品需求

先说需求,由于涉及到实际公司的项目开发,满足需求的图片编辑器可能只是编辑一张单独的图片,可能是给你一个图片列表也就是多张图片的编辑,在用户保存之前,用户可以来回切换现在编辑哪张图片,而且要记住每张照片的编辑操作,都要允许可以撤销,最后统一点击保存按钮,没有编辑过的图片将被丢弃,已经编辑过的带着涂鸦的图片上传给服务器。

准备工作,必须了解的相关知识点

html2canvas的使用

html2canvas这个插件实际是将网页上的普通html元素转化成canvas。那么为什么要将html元素转化成canvas呢?那是因为canva具有许多html元素不具备的特点,例如可以在canvas上画图,画线条等等操作,而且canvas直接提供api可以将画布上展示的内容导成图片。是不是有点类似于截图,html2canvas就是利用这一点。 我最开始使用html2canvas时在公司h5项目有一个手写板的项目。需要在是手写板中签字,然后将签字之后的图片导出然后上传。后来又有一个在web端的图片编辑器的项目,又用到了html2canvas这个插件,下面来介绍下该插件

介绍

html2canvas的缺点:

用html2canvas转成的canvas,在最后生成的视觉效果上并不是100%还原原来的元素,也就是说会有部分像素点会丢失。

html2canvas的安装

npm install html2canvas

html2canvas的引入

import html2canvas from \’html2canvas\’

html2canvas的使用

如果一个带图片(无论是img标签还是背景图)的html元素在转成canvas之后,该生成的canvas中img或者背景图缺失,变成了白色的底,并且控制台都告诉你图片跨域了,解决方案如下: 以下第1条必须满足,然后第2、3是根据是html元素是img标签还是背景图,来添加不同的配置项。

1.图片服务器配置Access-Control-Allow-Origin 或使用代理 2.html2canvas的配置项中配置useCORS:true 3.img标签增加 crossOrigin=’anonymous’

html转canvas,并且解决图片跨域问题

html2canvas(dom, { useCORS: true, // 背景图片跨域 scale: window.devicePixelRatio,//像素比 width: dom.offsetWidth height: dom.offsetHeight }).then(canvas => { //得到base64 let base64 = canvas.toDateUrl() })

因为html2canvas将普通的html转成了canvas,而canvas自带将自身转成的base64的方法,而base64格式文件可以直接作为img标签的src,展示在页面上

<img :src=\’base64\’ />

此时如果希望将生成的图片上传,base64是无法直接上传的,需要将base64转成blob格式。所以如下:我们将得到的base64数据传进base64ToBlob函数,最后函数return的结果就是blob数据。请注意:该方法只是单纯的将base64转成blob的通用方法

base64转blob

function base64ToBlob(base64){ var arr = base64.split(\’,\’), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n–) { u8arr[n] = bstr.charCodeAt(n); } return (new Blob([u8arr], { type: mime })) }

其实canvas自带将canas转化成blob对象的方法

canvas转blob

canvas.toBlob(file=>{ //此时file就是blob数据格式。 //成功上传成blob之后需要为该blob数据添加name属性,否则后面上传到服务器会报错:size not set file.name = \’cover.png\’ })

但是在实际项目开发中遇到部分低版本的手机浏览器中的canvas元素不支持toBlob方法,报错toBlob is not a function。所以此时我们需要对当前不支持canvas.toBlo方法的浏览器做polyfill

DOM canvas元素暴露了HTMLCanvasElement接口,该接口提供了用来操作一个canvas元素布局和呈现的属性和方法HTMLCanvasElement接口继承了element接口的属性和方法。(来自MDN)

123下一页

(0)
上一篇 2022年9月7日 上午9:20
下一篇 2022年9月7日 上午9:32

相关推荐

发表回复

登录后才能评论