Question

Upload.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。

Answer 1

您可以使用toDataURL()方法从画布获取数据网址。我稍微修改了你的代码，添加了一个数据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>

如何获取上传图片的DataUrl？

1 个答案: