設置/從畫布獲取圖像的名稱

嗨，沒有人知道如何獲取或可能設置圖像的名稱在畫布中？我使用此代碼將圖像保存爲圖像，但我不知道如何獲取圖像的名稱或設置方式。我的目標是加載圖像或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"); 
      };

來源

2016-03-15 Fabio Balsamo

我不知道你在問什麼： - //看來你從畫布上獲取數據URL，但是你沒有創建一個imageObject（命名或取消除非它是在你的「黑盒子」'$ scope'對象中創建的。 – markE

我改變了這段代碼給你看我的代碼 –

您可以使用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')); 
});

來源

2016-03-15 21:42:22 Kain

非常感謝你......我會盡力......並且與離子是一樣的權利？ –

設置/從畫布獲取圖像的名稱

回答

相關問題