Question

127

Open local image in canvas

rated 0 times [ 130] [ 3] / answers: 1 / hits: 20264 / 12 Years ago, wed, april 18, 2012, 12:00:00

i'm trying to make an javascript image color picker.
It is possible to open local image in canvas, without uploading it to server ?

function draw() {

    var ctx = document.getElementById('canvas').getContext('2d');

    var img = new Image();

    img.onload = function(){

        ctx.drawImage(img,0,0);

    }



    img.src = $('#uploadimage').val(); 

}



<input type='file' name='img' size='65' id='uploadimage' />

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

malkajillc

Add To Favorites

Follow

Total Points: 652

Total Questions: 107

Total Answers: 98

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

malkajillc questions

1 Vitest mock modules function in only one test and use the actual function in others

Wed, Nov 2, 22, 00:00, 2 Years ago

1 How to change PrismaClient database connection at runtime?

Tue, Jun 29, 21, 00:00, 3 Years ago

1 How do I add the axios package to my chrome extension I'm working on?

Tue, Dec 15, 20, 00:00, 4 Years ago

1 How to make a bot ping a user using discord.js

Fri, Aug 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'v4' of undefined

Tue, Aug 11, 20, 00:00, 4 Years ago

View All

answered 12 Years ago sashacitlallik · Accepted Answer

Not supported in all browser (IE and Opera AFAIK) but you could get a data URI using the File API

function draw() {

  var ctx = document.getElementById('canvas').getContext('2d')

    , img = new Image()

    , f = document.getElementById(uploadimage).files[0]

    , url = window.URL || window.webkitURL

    , src = url.createObjectURL(f);



  img.src = src;

  img.onload = function(){

    ctx.drawImage(img,0,0);

    url.revokeObjectURL(src);

  }

}



<input type='file' name='img' size='65' id='uploadimage' />

I added a fiddle here as an example.