js 的canvas使用 -- canvas转图片、图片转canvas、base64图片下载到本地、复制剪贴板、生成二维码的canvas

将canvas 转图片 以及 将 图片转成 canvas的方法

1. 图片转到画布上

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);

    return canvas;
}
// (image, 0, 0); 其中0,0表示canvas的坐标点

2. 画布转成图片

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}
// "image/png"表示canvas转成的图片类型，默认是png，可以改成"image/jpeg"

3. base64图片下载到本地（android另说）

/**
 * 下载Base64到本地
 1. trident内核都不可以（IE，猎豹）
 2. chrome, opera 等使用blink内核 可以（但是chrome好像还是webkit内核）
 3. firefox（Gecko） 可以
 4. 三星可以（多余后缀）
 5. 小米自带的手机浏览器可以（但filename乱码）
 6. qq， uc（PC都可以）
 * */
function downloadFile(content, fileName) { //下载base64图片
    const base64ToBlob = function(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for(let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
            type: contentType
        });
    };
    let aLink = document.createElement('a');
    let blob = base64ToBlob(content); //new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    // aLink.click();
    aLink.dispatchEvent(new MouseEvent("click", {bubbles: true, cancelable: true, view: window}));  //
}

4. 复制剪贴板

/**
 * 复制进剪贴板
 * @param str
 */
export function copyText(message) {
    // copy(str){
    //     let save = function (e){
    //         e.clipboardData.setData('text/plain',str);//clipboardData对象
    //         e.preventDefault();//阻止默认行为
    //     };
    //     document.addEventListener('copy',save);
    //     return document.execCommand("copy");//使文档处于可编辑状态，否则无效
    // }

    let input = document.createElement("textarea");
    input.value = message;
    document.body.appendChild(input);
    input.select();
    input.setSelectionRange(0, input.value.length);
    document.execCommand('Copy');
    document.body.removeChild(input);
    console.log("复制成功")     //"复制成功"
}

5. 生成二维码的canvas（使用jquery 和 jquery.qrcode.js ）

// 生成二维码canvas - 使用jquery 和 jquery.qrcode.js 
function() {  
     var imgBuffer = $("<div></div>");
        imgBuffer.qrcode({
            render: 'canvas',
             0.24 * deviceWidth * ratio,
            height: 0.24 * deviceWidth * ratio,
            text: url,
            foreground: "#000000",
            correctLevel: 3,
            minVersion: 1,
            //src: require("../image/logo-qrcode.png"),
        });
        // var ctx = imgBuffer.children("canvas")[0].getContext("2d");
        // this.qrcodeImageObj = imgBuffer.children("canvas")[0];
        // this.qrcodeImageSrc = imgBuffer.children("canvas")[0].toDataURL();
        // this.qrCodeData = ctx.getImageData(0,0,imgBuffer.children("canvas")[0].width, imgBuffer.children("canvas")[0].height);
}
// 123

方法二： 使用 npm i qrcode

// 使用 npm i qrcode 的二维码生成功能   
function getQrcodeCanvas = { 
    const _this = this;
        await QRCode.toCanvas(url, {
             0.24 * deviceWidth * ratio,
            height: 0.24 * deviceWidth * ratio,
            text: url,
            foreground: "#000000",
            correctLevel: 3,
            minVersion: 1,
        }, function (err, canvas) {
            var ctx = canvas.getContext("2d");
            _this.qrcodeImageObj = canvas;
            _this.qrcodeImageSrc = canvas.toDataURL();
            _this.qrCodeData = ctx.getImageData(0,0, canvas.width, canvas.height);
        });
}

最后： 实例

/**
 * 使用
 */
const data = {
     document.body.clientWidth,
    height: document.body.clientHeight
}
new DrawInvitation(data, (src, canvas, imageObj, imageSrc) => {
    // success callback
    // 显示 canvas
    // 显示 image
    // 保存 image
}, () => {
    // fail callback
})




/**
 * 画图
 */
class DrawCanvas {
    constructor(data, successCallback, errorCallback) {
        this.url = "https://123.com";

        var deviceWidth = data.width ? data.width : window.screen.width;
        var deviceHeight = data.height ? data.height : window.screen.width * 16/9;
        var dpr = window.devicePixelRatio || 1;
        var canvas = $("<canvas id='qrcode-canvas'></canvas>");
        canvas.attr("width",deviceWidth);
        canvas.attr("height",deviceHeight);
        canvas.css("position", "absolute");
        canvas.css("left", "0");
        canvas.css("top", "0");
        canvas.css("z-index", "1");
        // canvas.css("display", "none");
        canvas.css("background-color", "#000000");
        var ctx = canvas[0].getContext("2d");
        var bspr = ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.BackingStorePixelRatio || 1;
        var ratio = dpr / bspr;
        canvas.css("width", canvas.attr("width"));
        canvas.css("height", canvas.attr("height"));
        canvas.attr("width", canvas.attr("width") * ratio);
        canvas.attr("height", canvas.attr("height") * ratio);

        this.qrCodeData = null;
        this.deviceWidth = deviceWidth;
        this.deviceHeight = deviceHeight;
        this.ctx = ctx;
        this.ratio = ratio;
        this.canvas = canvas;
        this.successCallback = successCallback;
        this.errorCallback = errorCallback;
    }

    /**
     * 生成二维码
     */
    async qrCodeCreater(){
        // 二维码的生成路径
        let {deviceWidth, ratio} = this;
        var imgBuffer = $("<div></div>");
        let url = this.url;
        // imgBuffer.qrcode({
        //     render: 'canvas',
        //      0.24 * deviceWidth * ratio,
        //     height: 0.24 * deviceWidth * ratio,
        //     text: url,
        //     foreground: "#000000",
        //     correctLevel: 3,
        //     minVersion: 1,
        //     //src: require("../image/logo-qrcode.png"),
        // });
        // var ctx = imgBuffer.children("canvas")[0].getContext("2d");
        // this.qrcodeImageObj = imgBuffer.children("canvas")[0];
        // this.qrcodeImageSrc = imgBuffer.children("canvas")[0].toDataURL();
        // this.qrCodeData = ctx.getImageData(0,0,imgBuffer.children("canvas")[0].width, imgBuffer.children("canvas")[0].height);

        const _this = this;
        await QRCode.toCanvas(url, {
             0.24 * deviceWidth * ratio,
            height: 0.24 * deviceWidth * ratio,
            text: url,
            foreground: "#000000",
            correctLevel: 3,
            minVersion: 1,
        }, function (err, canvas) {
            var ctx = canvas.getContext("2d");
            _this.qrcodeImageObj = canvas;
            _this.qrcodeImageSrc = canvas.toDataURL();
            _this.qrCodeData = ctx.getImageData(0,0, canvas.width, canvas.height);
        });
    };

    /**
     * 生成图片
     */
    draw() {
        // 生成二维码的图片
        this.qrCodeCreater();
        const _this = this;
        // var imgBuffer = $("<img></img>");
        // imgBuffer.on("load", function() {})  //jquery的监听从1.8版本开始，不可使用load直接进行
        var imgBuffer = new Image();
        imgBuffer.crossOrigin = "Anonymous";
        imgBuffer.src = "图片1.png";
        imgBuffer.onload = function(){
            var imgBuffer_2 = new Image();
            imgBuffer_2.crossOrigin = "Anonymous";
            imgBuffer_2.src = "图片2.png";
            imgBuffer_2.onload = function(){
                var imgBuffer_3 = new Image();
                imgBuffer_3.crossOrigin = "Anonymous";
                imgBuffer_3.src = "图片3.png";
                imgBuffer_3.onload = function(){
                    _this.drawCanvas(imgBuffer, imgBuffer_2, imgBuffer_3);
                };
                imgBuffer_3.onerror = function () {
                    showErrorMessage(i18n.home.generate_card_fail, _this.errorCallback);    //'生成邀请函失败！'
                };
            };
            imgBuffer_2.onerror = function () {
                showErrorMessage(i18n.home.generate_card_fail, _this.errorCallback);    //'生成邀请函失败！'
            }
        };
        imgBuffer.onerror = function () {
            showErrorMessage(i18n.home.generate_card_fail, _this.errorCallback);    //'生成邀请函失败！'
        }
    }

    /**
     * onload 图片后合成canvas
     * @param imgBuffer
     * @param imgBuffer_2
     */
    drawCanvas(imgBuffer, imgBuffer_2, imgBuffer_3) {
        let {qrCodeData, ctx, canvas, deviceWidth, deviceHeight, ratio, successCallback} = this;
        ctx.clearRect(0,0,canvas.attr("width"), canvas.attr("height"));
        //背景颜色
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, canvas.attr("width"), canvas.attr("height"));
        ctx.textAlign="center";
        // ctx.drawImage(imgBuffer, 0, 0, canvas.attr("width"), canvas.attr("height"));

        let canvasWidth= canvas.attr("width"), canvasHeight = canvas.attr("height");
        // 顶部橙色圆弧背景
        ctx.beginPath();
        // ctx.arc(300, -540, 750, 0, 2*Math.PI);
        ctx.arc(canvasWidth/6*5, -canvasWidth/9*13.5, canvasWidth/12*25, 0, 2*Math.PI);
        ctx.stroke();
        ctx.fillStyle="#03bcd5";
        ctx.fill();
        // logo图片
        ctx.drawImage(imgBuffer, canvasWidth * 0.2, canvasWidth * 0.14, canvasWidth*0.6, canvasWidth*0.6*0.31466);//0.31466470154753131908621960206338
        // 底部图片
        ctx.drawImage(imgBuffer_2, canvasWidth * 0.382/2, canvasHeight-canvasWidth * 0.618, canvasWidth * 0.618, canvasWidth * 0.618);
        // 二维码背景
        ctx.beginPath();
        ctx.rect(canvasWidth*0.38-canvasWidth*0.01, canvasHeight*0.59-canvasWidth*0.008, qrCodeData.width+canvasWidth*0.02, qrCodeData.height+canvasWidth*0.02);
        ctx.stroke();
        ctx.fillStyle="#ffffff";
        ctx.fill();
        // 二维码
        ctx.putImageData(qrCodeData, canvas.attr("width") * 0.38, canvas.attr("height") * 0.59);

        ctx.drawImage(imgBuffer_3,
            canvas.attr("width") * 0.38 + this.qrcodeImageObj.width/2 - this.qrcodeImageObj.width/4.7/2,
            canvas.attr("height") * 0.59 + this.qrcodeImageObj.height/2 - this.qrcodeImageObj.height/4.7/2,
            this.qrcodeImageObj.width/4.7,
            this.qrcodeImageObj.height/4.7);

        //文字颜色
        ctx.fillStyle = "#000000";
        var in_text3 = "123456789";
        var in_text4 = "123456789";
        var in_text5 = "123456789";
        var in_text6 = "123456789";

        // 1
        ctx.font= "900 " + deviceWidth * ratio / (getCurrentInputLength(in_text3) * 1 > 12 ? getCurrentInputLength(in_text3) * 1 : 12) +"px 微软雅黑";
        ctx.fillText(in_text3, 0.5 * deviceWidth * ratio , 0.42 * deviceHeight * ratio);
        // 2
        this.fillTextAndAutoChangeLine(ctx, deviceWidth, ratio, deviceHeight, in_text4);
        // 3
        ctx.font= "bold " + deviceWidth * ratio / 22 + "px exo, JiaLiDaYuan, 微软雅黑";
        ctx.fillText(in_text5, 0.5 * deviceWidth * ratio , 0.815 * deviceHeight * ratio);
        ctx.fillText(in_text6, 0.5 * deviceWidth * ratio, 0.855 * deviceHeight * ratio);

        // $("#imgBox").children("img").attr("src", canvas[0].toDataURL());
        successCallback(canvas[0].toDataURL(), canvas, this.qrcodeImageObj, this.qrcodeImageSrc);
    }


    /** 绘制文字时自动换行 */
    fillTextAndAutoChangeLine(ctx, deviceWidth, ratio, deviceHeight, text) {
        ctx.font= deviceWidth * ratio / 22 +"px 微软雅黑";
        // 一个字符的宽度
        const oneCharWidth = ctx.measureText("M").width;
        // canvas的宽度, 这里特意少个字符
        const canvasWidth = deviceWidth * ratio - 3 * oneCharWidth;
        const len = text.length;
        // 初始Y的距离
        let initY = 0.45 * deviceHeight * ratio;
        const lineHeight = 0.03 * deviceHeight * ratio;
        // 预存字符串
        let preWriteText = "";
        let preWriteTextWidth = 0;
        // 整个单词, 遇到不完整的就换行
        let totalWord = "";
        for (let i = 0; i < len; i ++) {
            const char = text.charAt(i);
            // 判断是否遇到空格
            if (char === " ") {
                totalWord = "";
            } else {
                totalWord += char;
            }
            // 计算字体的宽度
            const charWidth = ctx.measureText(char).width;
            preWriteTextWidth += charWidth;
            // 如果大于cavas宽度并且不是最后一个字符并且是一个完整的单次, 则将这行写下来, 并换行
            if (i != len - 1 && preWriteTextWidth >= canvasWidth) {
                // 通过下一个是不是空格判断是不是一个完整的单次
                if (char != " "&& preWriteText.indexOf(" ") !== -1) {
                    // 不是完整的单次, 则退回到单次开头
                    const wordFirstCharPos = preWriteText.length - totalWord.length + 1;
                    preWriteText = preWriteText.substring(0, wordFirstCharPos);
                    initY += lineHeight;
                    ctx.fillText(preWriteText, 0.5 * deviceWidth * ratio , initY);
                    i -= totalWord.length;
                    // 单次的第一个字母
                    const wordFirstChar = text.charAt(wordFirstCharPos);
                    preWriteText = "";
                    preWriteTextWidth = 0;
                }
                // 下一个不是空格, 并且这一行中没有空格, 则把这行写下来 ||
                else {
                    initY += lineHeight;
                    // 当前单次切掉, 确保不爆框
                    preWriteText = preWriteText.substring(0, preWriteText.length);
                    ctx.fillText(preWriteText, 0.5 * deviceWidth * ratio , initY);
                    // 换行
                    preWriteText = char;
                    preWriteTextWidth = charWidth;
                }
            } else {
                preWriteText += char;
            }
            // 直到最后一个字
            if (i == len - 1) {
                initY += lineHeight;
                ctx.fillText(preWriteText, 0.5 * deviceWidth * ratio , initY);
            }
        }
    }
}