从画布

Question

您好，没有人知道如何获取或可能在画布中设置图像的名称？ 我使用此代码将画布保存为图像，但我不知道如何获取图像的名称或如何设置。 我的目标是加载图像或pdf，在其上绘制并保存在另一个图像或pdf中。

      var img =  new Image();
        var startimg="img/green.jpg";
        $scope.image=startimg;
        img.src = startimg;

        var sourceCanvas = document.getElementById('signatureCanvas');
        var context = sourceCanvas.getContext('2d');


        var canvasFirma = document.getElementById('tempCanvas');
        var contextFirma = canvasFirma.getContext('2d');

      img.onload = function() {
             sourceCanvas.width = img.width;
             sourceCanvas.height = img.height;
             //context.drawImage(img, 0, 0);
             console.log('The canvas size is '+ sourceCanvas.width +'*'+ sourceCanvas.height);
             console.log('The image size is '+ img.width +'*'+ img.height);
            context.drawImage(img, 0, 0, img.width, img.height);
           }

      var signaturePad = new SignaturePad(canvasFirma);

          $scope.clearCanvas = function() {
              signaturePad.clear();
          }

         $scope.saveCanvas = function() {
            $scope.clearSave = false;
            $scope.FirmaBtn = true;
            $scope.canvasSi = false;
        //salvo la firma

        var firma = signaturePad.toDataURL("image/jpeg");
        $timeout( function(){
        $scope.signature = firma;
        if ($scope.signature) {
        $scope.resizeCanvas();
        }
        }, 200);

             };

    //to merge canvas and image
    var canvasF = document.getElementById("canvasFinale");
    var ctx = canvasF.getContext("2d");




    var img1 = loadImage('img/green.jpg', main);

/*this one "image.jpg" i need to get the name or give new one because this is for example*/
        var img2 = loadImage('img/image.jpg', main);

    var imagesLoaded = 0;
    function main() {
        imagesLoaded += 1;

        if(imagesLoaded == 2) {
            // composite now
            ctx.drawImage(img1, 0, 0);
    //questo da la transparenza magari toglierlo
            ctx.globalAlpha = 0.5;
            ctx.drawImage(img2, 0, 0);
        }
    }
    function loadImage(src, onload) {

        var img = new Image();

        img.onload = onload;
        img.src = src;
        /*
        canvasF.width = img.width;
        canvasF.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
        */
        console.log("src "+ src);
        return img;
    }


    $timeout( function(){
        $scope.signature = firma;
        if ($scope.signature) {
                   $scope.resizeCanvas();
                 }
               }, 200);


             };

             $scope.resizeCanvas = function () {

               canvasFirma.width = canvasFirma.offsetWidth * ratio;
               canvasFirma.height = canvasFirma.offsetHeight * ratio;
               canvasFirma.getContext('2d').scale(ratio, ratio);
                           console.log("resize canvasFirma 2");
             };

Answer 1

您可以使用download attribute下载带有自定义名称的画布图像。

Codepen Example

var canvas = $("#canvas")[0];
var ctx = canvas.getContext('2d');
ctx.fillRect(10,10,10,10);

$("#download").on("click", function(e) {
    $("#download").attr("download", "CustomName.png");
    $("#download").attr("href", canvas.toDataURL().replace(/^data:image\/[^;]/, 'data:application/octet-stream'));
});