如何获取上传图片的DataUrl？答案

【问题标题】：How to get DataUrl of uploaded image?如何获取上传图片的DataUrl？
【发布时间】：2017-05-09 05:58:56
【问题描述】：

上传.html

<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>

用于上传 blob url 并将其转换为 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);
        });

我面临的问题是我正在获取 dataUrl，但它是原始图像而不是上传的图像。上传的图像比原始图像旋转一个。

请帮助我。旋转图像将在 var2 中出现。

【问题讨论】：

你想要画布图片旋转后的数据url吗？
是的。你说的很对@azs06

标签： javascript image blob data-url

【解决方案1】：

您可以使用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){
	var getImagePath = URL.createObjectURL(event.target.files[0]);
	temp_can1 = document.getElementById('f6258182013');
	temp_can1_ctx = temp_can1.getContext('2d');
	forearmleftrotator(getImagePath, '77');
    }

function forearmleftrotator(var2, var3){
	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();
        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();
			imageHolder.src = mr_rotator_var.toDataURL();

        };       

	}
//**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]);
}

<!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="">	
<form>	
<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>

【讨论】：