Canvas.toDataURL()未显示画布的背景图像 [英] Canvas.toDataURL() not showing background image of canvas

问题描述

我已经使用CSS将背景图片添加到画布上.

I have added background image to canvas using css.

但是当使用canvas.toDataURL()将其转换为png时，它不显示背景图像.

But when converting it into png using canvas.toDataURL() , its not showing background image.

似乎没有解析CSS背景图片.

It seems like its not parsing css background image.

var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));

        var canvas = document.getElementById("canvas");
        d3.select('canvas')
          .attr('style', 'background-image:url("chart.png");background-position:50%;background-repeat:no-repeat');

        var ctx = canvas.getContext("2d");

        var DOMURL = self.URL || self.webkitURL || self;
        var img = new Image();
        //var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
        var svg = new Blob([svgString], {type: "image/svg+xml"});
        var url = DOMURL.createObjectURL(svg);


        var png = '';



        img.onload = function() {


           ctx.drawImage(img, 0, 0);
            png = canvas.toDataURL("image/png");
           document.querySelector('#chart').innerHTML = '<img src="'+png+'"/>';
            DOMURL.revokeObjectURL(png);
            img.src = "";
        };
        img.crossOrigin = "anonymous";


        img.src = url;

推荐答案

This solution is working 

var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var DOMURL = self.URL || self.webkitURL || self;
        var img = new Image();
        //var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
        var svg = new Blob([svgString], {type: "image/svg+xml"});
        var url = DOMURL.createObjectURL(svg);

        var png = '';
        var emailConfirmationMessage = '';
        var img1 = new Image();

        img.onload = function() {
            ctx.drawImage(img1, 136, 136);
            ctx.drawImage(img, 0, 0);

            sendEmail(canvas,DOMURL);

        };

         img1.onload = function(){
           img.src = url;
         };
        img1.src = 'chart1.png';

这篇关于Canvas.toDataURL()未显示画布的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！