使用文件上传器上传文件在画布上绘制图像 [英] Draw image on canvas by uploading file using file uploader

问题描述

我正在尝试在画布上绘制图像，使用File Uploader上传图像文件。它在Chrome和IE10上工作正常但它在IE9上打破。我使用的createObjectURL方法在IE9上不支持（我猜...）。有没有其他方法可以在IE9上运行这个工作？



我在画布上绘制图像的代码

I am trying to draw image on canvas, the image file is uploaded using File Uploader. It's working fine on Chrome and IE10 however it breaks on IE9.The createObjectURL method which i am using is not supported on IE9(i guess..).Is there any alternative way to get this work on IE9?

My code for drawing image on canvas

var URL = window.webkitURL || window.URL ;
   if ($("#rwAddImage_C_RadUploadImgfile0")[0].files[0] == undefined || $("#rwAddImage_C_RadUploadImgfile0")[0].files[0] == null) {
       alert('Please select image');
       return;
   }

   var url = URL.createObjectURL($("#rwAddImage_C_RadUploadImgfile0")[0].files[0]);
   var img = new Image();
   img.src = url;

   img.onload = function () {

       img_width = ($('#rwAddImage_C_txtImgWidth').val() != "" ? $('#rwAddImage_C_txtImgWidth').val() : img.width);
       img_height = ($('#rwAddImage_C_txtImgHeight').val() != "" ? $('#rwAddImage_C_txtImgHeight').val() : img.width);

       context.drawImage(img, imgPosX, imgPosY, img_width, img_height);
       img_update();
       cPush();
   }

推荐答案

（ < span class =code-string>＃rwAddImage_C_RadUploadImgfile0）[ 0 ]。files [ 0 ] == undefined ||

("#rwAddImage_C_RadUploadImgfile0")[0].files[0] == undefined ||

（ < span class =code-string>＃rwAddImage_C_RadUploadImgfile0）[ 0 ]。files [ 0 ] == null ）{
alert（' 请选择图片'）;
return ;
}

var url = URL.createObjectURL（

("#rwAddImage_C_RadUploadImgfile0")[0].files[0] == null) { alert('Please select image'); return; } var url = URL.createObjectURL(

（ ＃rwAddImage_C_RadUploadImgfile0）[ 0 ]。files [< span class =code-digit> 0 ]）;
var img = new Image（）;
img.src = url;

img.onload = function （）{

img_width =（

("#rwAddImage_C_RadUploadImgfile0")[0].files[0]); var img = new Image(); img.src = url; img.onload = function () { img_width = (

这篇关于使用文件上传器上传文件在画布上绘制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！