canvas图片合成

Posted on Edited on

图片合成实例——国庆头像H5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function drawCanvasImage() {
    let width = 500
    let height = 500
    downloadRef.current.width = width
    downloadRef.current.height = height
    let myimage = new Image() //创建图片对象
    if(!imgURL){
        alert('请选择图片')
        return
    }
    myimage.src = imgURL //设置绘制图像路径
    let background = new Image()
    if(!kuang){
        alert('请选择头像框')
        return
    }
    background.setAttribute("crossOrigin",'Anonymous')//解决跨域问题，画布污染问题
    background.src = kuang
    if(downloadRef.current.getContext){
        let ctx = downloadRef.current.getContext('2d')//获取绘图2D环境
        myimage.onload = function(){//图片加载完再去控制
            ctx.drawImage(myimage,0,0,width,height)//在画布上根据坐标绘制
            background.onload = function() {
                ctx.drawImage(background,0,0,width,height)
                downloadImage()
            }

        }
    }
}

const downloadImage = ()=>{
    if(window.innerWidth < 1000 ) {
        const url = downloadRef.current.toDataURL()
        setDownloadURL(url)
        setIsDownload(true)
        setIsTip(true)
        setTimeout(() => {
            setIsTip(false);
          }, 3000);
        setIsChoose(false)
    } else {
        const url = downloadRef.current.toDataURL();
        const a = document.createElement("a"); // 生成一个a元素
        const event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "avatar"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
    }
}
1
<canvas ref={downloadRef} id='canvas'></canvas>

useRef()

1、返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )。
2、返回的 ref 对象在组件的整个生命周期内保持不变
3、当更新 current 值时并不会重新渲染，这是与 useState 不同的地方

※使用useRef可以保证实时获取到最新的值

toDataURL()

1、toDataURL()方法是什么？

toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码；

2、利用canvas的toDataURL()方法如何将图片转换为base64编码？

通过将图片绘制到canvas中，然后将canvas对象转换为base64编码，从而实现图片转为base64编码；

3、将图片转换为base64位编码有什么好处？

1）将图片转换为base64位编码后，图片会跟随代码（html、css、js）一起请求加载，不会再单独进行请求加载；

2）可以防止由于图片路径错误导致图片加载失败的问题；

4、toDataURL()方法的两个参数：toDataURL(type, encoderOptions)

1）type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；

2）encoderOptions用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；

a标签法本地下载图片

步骤：
1、将 canvas 元素的数据通过原生 api 转换成 base64 编码的图片格式
2、利用 a 标签设置 download 属性可以将 href 链接元素下载，我们将 a 标签的 href 属性值设置为上一步获得的 base64 格式字符串
3、构造一个单击事件并通过 api 触发 a 标签的 click 事件完成下载

优缺点：
优点：只使用浏览器提供的原生 API 就能实现我们的需求。
缺点：
1）无法被异步代码包裹，也就是包含 Ajax 请求的情况下代码不生效。
2）对于分辨率过高的 canvas, 我们生成的 dataURL 过长，超过浏览器限制，可能会导致无法顺利下载。

解决办法：可采用blob方法，感兴趣可以百度学习一下^_^

canvas补充

详细学习canvas可参考https://www.runoob.com/w3cnote/html5-canvas-intro.html
学习2d上下文可参考https://blog.csdn.net/qq_41218152/article/details/82664178