How to get DataUrl of uploaded image?

Question

How to get DataUrl of uploaded image?

2.3k Views Asked by Mohammed At 09 May 2017 at 05:58

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.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);
        });

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.

Original Q&A

There are 1 best solutions below

**azs06** · Answer 1 · 2017-05-10T14:01:00.030000

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>

How to get DataUrl of uploaded image?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in IMAGE

Related Questions in BLOB

Related Questions in DATA-URL

Trending Questions

Popular # Hahtags

Popular Questions