アップロードした画像のDataUrlを取得するには？

Upload.html アップロードした画像のDataUrlを取得するには？

<input type="hidden" name="forearmleft" id="forearm" value=""> 
<input type="hidden" name="elbotxt" id="elbotxt" value=""> 
<input type="hidden" name="rightall" id="rightall" value=""> 
    <!--<img src="" id="elbotxt">--> 
</form> 
<canvas id="c"></canvas>  
<canvas id="mr_rotator_can" width="436" height="567"></canvas> 
<canvas id="f6258182013" width="436" height="567"></canvas>

私はdataUrlが、そのオリジナル画像の代わりに、アップロードされた画像のを取得mのことを直面していますdataurl

var source, source_ctx, sleeve, sleeve_ctx, finalsleeve, finalsleeve_ctx, temp_can1, temp_can1_ctx; 

    function forearmleftcurve(event){ 

     var getImagePath = URL.createObjectURL(event.target.files[0]); 
      console.log(getImagePath) 

     temp_can1 = document.getElementById('f6258182013'); 
     temp_can1_ctx = temp_can1.getContext('2d'); 

     forearmleftrotator(getImagePath, '77'); 
     // draw_on_cloth("f6258182013", 'http://i.stack.imgur.com/1j8Dw.png', "mr_rotator_can", "img_fastening1a"); 

    }; 

    function forearmleftrotator(var2, var3) //var2=image aka pattern var3= angle for rotate 
    { 
     var mr_rotator_var = document.getElementById('mr_rotator_can'); 
     var mr_rotator_var_ctx = mr_rotator_var.getContext("2d"); 
     mr_rotator_var.width = mr_rotator_var.width; 
     var imageObj_rotator = new Image(); 
     console.log(mr_rotator_var.toDataURL()); 

     imageObj_rotator.onload = function() { 
      var pattern_rotator = mr_rotator_var_ctx.createPattern(imageObj_rotator, "repeat"); 
      mr_rotator_var_ctx.fillStyle = pattern_rotator; 
      mr_rotator_var_ctx.rect(0, 0, mr_rotator_var.width, mr_rotator_var.height); 
      mr_rotator_var_ctx.rotate(var3 * Math.PI/180); 
      mr_rotator_var_ctx.fill(); 

     }; 
     imageObj_rotator.src = var2; 

     //**blob to dataURL** 
     function blobToDataURL(blob, callback) { 
      var a = new FileReader(); 
      a.onload = function(e) {callback(e.target.result);} 
      a.readAsDataURL(event.target.files[0]); 
      console.log(event.target.files[0]) 
     } 

     test: 
     blobToDataURL(var2, function(dataurl){ 
      console.log(dataurl); 
     });

問題へのアップロードとブロブのURLに変換するためのスクリプトファイルアップロードされた画像は元の画像より1回転します。

私にこれを助けてください。回転した画像がvar2に来ています。

出典

2017-05-09 Mohammed

それが回転していた後、あなたはキャンバスの画像のデータのURLをしたいですか？ – azs06

はい。あなたはとても正しいです@ azs06 – Mohammed

toDataURL()メソッドを使用して、キャンバスからデータURLを取得できます。あなたのコードを少し修正して、画像としてレンダリングされるデータURLの例を追加しました。

var source, source_ctx, sleeve, sleeve_ctx, finalsleeve, finalsleeve_ctx, temp_can1, temp_can1_ctx; 
 
var imageHolder = document.getElementById('imageHolder'); 
 
var fileInput = document.getElementById('forearm'); 
 

 
fileInput.addEventListener('change', forearmleftcurve); 
 

 
function forearmleftcurve(event){ 
 
\t var getImagePath = URL.createObjectURL(event.target.files[0]); 
 
\t temp_can1 = document.getElementById('f6258182013'); 
 
\t temp_can1_ctx = temp_can1.getContext('2d'); 
 
\t forearmleftrotator(getImagePath, '77'); 
 
    } 
 

 
function forearmleftrotator(var2, var3){ 
 
\t var mr_rotator_var = document.getElementById('mr_rotator_can'); 
 
\t var mr_rotator_var_ctx = mr_rotator_var.getContext("2d"); 
 
\t mr_rotator_var.width = mr_rotator_var.width; 
 
\t var imageObj_rotator = new Image(); 
 
     imageObj_rotator.src = var2; 
 

 
     imageObj_rotator.onload = function() { 
 
      var pattern_rotator = mr_rotator_var_ctx.createPattern(imageObj_rotator, "repeat"); 
 
      mr_rotator_var_ctx.fillStyle = pattern_rotator; 
 
      mr_rotator_var_ctx.rect(0, 0, mr_rotator_var.width, mr_rotator_var.height); 
 
      mr_rotator_var_ctx.rotate(var3 * Math.PI/180); 
 
      mr_rotator_var_ctx.fill(); 
 
\t \t \t imageHolder.src = mr_rotator_var.toDataURL(); 
 

 
     };  
 

 
\t } 
 
//**blob to dataURL** 
 
function blobToDataURL(blob, callback) { 
 
\t var a = new FileReader(); 
 
\t a.onload = function(e){ 
 
\t \t callback(e.target.result); 
 
\t } 
 
\t a.readAsDataURL(event.target.files[0]); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Canvas</title> 
 
</head> 
 
<body> 
 
<img id="imageHolder" src="" alt=""> \t 
 
<form> \t 
 
<input type="file" name="forearmleft" id="forearm" value=""> 
 
<input type="hidden" name="elbotxt" id="elbotxt" value=""> 
 
<input type="hidden" name="rightall" id="rightall" value=""> 
 
</form> 
 
<canvas id="c"></canvas>  
 
<canvas id="mr_rotator_can" width="436" height="567"></canvas> 
 
<canvas id="f6258182013" width="436" height="567"></canvas> 
 
</body> 
 
</html>

出典

2017-05-10 14:01:00 azs06

アップロードした画像のDataUrlを取得するには？

答えて

関連する問題