canvas画布保存图片，avaScript将图片转画布，用JavaScript将画布保持成图片格式，上传阿里云

本文链接：https://blog.youkuaiyun.com/weixin_37806077/article/details/84797141

本文介绍了一个使用HTML5 Canvas进行绘图的网页应用，用户可以在此应用上自由绘画，并提供了清除和保存画作的功能。保存的画作将通过base64编码转换为图片，然后利用阿里云OSS SDK上传至指定的存储空间。此外，还实现了将上传后的图片显示在页面上的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            /*background: black;*/

        }

        div#a {
            width: 1105px;
            height: 500px;
            margin: 0 auto;
            border: 0px solid;
        }

        /*#canvas{*/
        /*background: white;*/
        /*margin: 100px 0 0 300px;*/
        /*}*/
    </style>
</head>
<body>
<div id="a">
    <canvas id="canvas" width="1105" height="500" style="border: solid 1px #000"></canvas>
</div>
<div id="down">
    <center>
        <button onclick="restuya()">清除</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="saveTu()" id="btn">保存</button>
    </center>
</div>
<img id="imgId" src="" alt="" width="300px" height="300px">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script>
    var img = document.getElementById('imgId');
    document.getElementById("btn").disabled = true;
    var canvas = document.getElementById('canvas');// 获取 canvas 对象 
    var ctx = canvas.getContext('2d');// 获取绘图环境  
    var last = null;
    var filedata = null;// 文件对象 
    ctx.strokeStyle = "pink";
    ctx.fillStyle = '#FFF';
    ctx.fillRect(0,0,1105,500);
    canvas.onmousedown = function () {// 鼠标按下
        canvas.onmousemove = move;// 在鼠标按下后触发鼠标移动事件 
        document.getElementById("btn").disabled = false;
    };
    canvas.onmouseup = function () {// 鼠标抬起取消鼠标移动的事件  
        canvas.onmousemove = null;
        last = null;
    };
    canvas.onmouseout = function () {// 鼠标移出画布时 移动事件也要取消。
        canvas.onmousemove = null;
        last = null;
    };

    function move(e) {// 鼠标移动函数  
        // console.log(e.offsetX);  
        if (last != null) {
            ctx.beginPath();
            ctx.moveTo(last[0], last[1]);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
        }
        // 第一次触发这个函数，只做一件事，把当前 鼠标的 x , y 的位置记录下来  
        // 做下一次 线段的 起始点。  
        last = [e.offsetX, e.offsetY];
    }

    // 重新在画  
    function restuya() {
        document.getElementById("btn").disabled = true;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = "pink";
        ctx.fillStyle = '#FFF';
        ctx.fillRect(0,0,1105,500);
        drawImg(filedata);
    }

    // 绘制图片  
    function drawImg(filedata) {
        var readFile = new FileReader();
        readFile.readAsDataURL(filedata);
        // 图片读取成功  
        readFile.onload = function () {
            var Img = new Image();
            Img.src = this.result;
            Img.onload = function () {
                // 根据 图片的 宽高 来 设置canvas 宽和高   
                canvas.width = Img.width;
                canvas.height = Img.height;
                ctx.drawImage(Img, 0, 0);
            }
        }
    }

    function saveTu() {

        var saveImage = canvas.toDataURL('images/jpg'); // base64
        // var b64 = saveImage.substring(22); // 二进制
        fn(saveImage);
        img.src = saveImage;

    }

    //上传图片
    function fn(b64) {
        function toBlob(urlData, fileType) {
            var bytes = window.atob(urlData),
                n = bytes.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bytes.charCodeAt(n);
            }
            return new Blob([u8arr], {type: fileType});
        }

        // 图像数据 (e.g. data:image/png;base64,iVBOR...yssDuN70DiAAAAABJRU5ErkJggg==)
        var dataUrl = b64;
        var base64 = dataUrl.split(',')[1];
        var fileType = dataUrl.split(';')[0].split(':')[1];

        // base64转blob
        var blob = toBlob(base64, fileType);

        // blob转arrayBuffer
        var reader = new FileReader();
        reader.readAsArrayBuffer(blob);
        reader.onload = function (event) {

            // 配置
            var client = new OSS.Wrapper({ // 这个地方配置上传阿里云的 参数配置
                region: '', // oss-cn-bei1
                accessKeyId: '', // LTAIsxEObGVQyWAj2
                accessKeySecret: '', // 1U84lkUWtU1cmXe4jUsdUYuog3p1PB3
                bucket: '', // zypartner-test4
                root_dir: '' // clinicQualificationImg5
            });

            // 文件名
            var date = new Date();
            var time = '' + date.getFullYear();
            var storeAs = 'Uploads/file/' + time + '/' + date.getTime() + '.' + blob.type.split('/')[1];

            // arrayBuffer转Buffer
            var buffer = new OSS.Buffer(event.target.result);

            // 上传
            client.put(storeAs, buffer).then(function (result) {
                console.log(result);
                console.log(result.url);
                $.ajax({
                    url: "http://192.168.18.82:8080/zyExcel/test/test",
                    dataType: "json",   //返回格式为json
                    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
                    data: {pic: result.url},
                    type: 'post',
                    beforeSend: function () {
                        //请求前的处理
                    },
                    success: function (req) {
                        console.log(req);
                        //请求成功时处理
                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        console.log("接口出错了");
                        //请求出错处理
                    }
                });
                /* e.g. result = {
                    name: "Uploads/file/20171125/1511601396119.png",
                    res: {status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …},
                    url: "http://bucket.oss-cn-shenzhen.aliyuncs.com/Uploads/file/20171125/1511601396119.png"
                } */
            }).catch(function (err) {
                console.log(err);
            });
        }
    }

</script>
</html>