How to get DataUrl of uploaded image?

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>

script file for upload and conversion of blob url into 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", 'https://i.sstatic.net/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);
        });

Problem I am facing that I m getting dataUrl but its of Original image instead of uploaded image.Uploaded image is rotate one than original image.

Please Help me for this. Rotated image is coming in var2.

Do you want the data url of the canvas image after it's been rotated? — azs06
– azs06, Commented May 10, 2017 at 6:16

azs06 · Accepted Answer · 2017-05-10 14:01:00Z

You can get data url from canvas using toDataURL() method. I modified your code slightly to add an example of data url being rendered as image.

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>

Collectives™ on Stack Overflow

How to get DataUrl of uploaded image?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related