获得输入图像的base64在IE7？ [英] Get base64 of image from input in ie7?
本文介绍了获得输入图像的base64在IE7？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在jQuery的功能，可以让我得到了在IE7上载的文件的名称。我能够获得该文件的名称，但我也试图让该文件的BASE64字符串。有什么办法来改变低于此功能来做到这一点？
VAR thumbnail_title_ preVIEW = { 更新：函数（值，event_target）{ VAR parent_upload_fields = $（event_target）。家长（'。上载照片'）;
VAR photos_list = $（'。上载照片列表-内'，parent_upload_fields）; VAR缩略图=使用document.createElement（分区）;
$（缩略图）.addClass（上传缩略图标题'）; VAR FILE_NAME =价值; 如果（IE7）{
file_name_array = file_name.split（'\\\\'）;
FILE_NAME = file_name_array [file_name_array.length - 1]; }其他{
FILE_NAME = file_name.replace（'C：'，''）;
FILE_NAME = file_name.replace（D：，''）;
FILE_NAME = file_name.replace（'\\\\ \\\\ fakepath'，''）; } 如果（file_name.length＆GT; 12）{
FILE_NAME = file_name.substring（0，12）+'...';
} $（缩略图）.append（'＆LT; P＆GT;'+ FILE_NAME +'＆LT; / P＆GT;'）; $（缩略图）.append（'＆LT;一类=删除，照片的href =＃＆GT;＆LT; / A＆GT;'）;
$（photos_list）.append（缩略图）; VAR number_of_thumbnails = $（'上传的缩略图标题。'，parent_upload_fields）。长度;
$（photos_list）的.css（{'宽度'：number_of_thumbnails *（117 + 20）}）; 如果（number_of_thumbnails == 5）{
$（'。上载照片，添加'，parent_upload_fields）的.css（{'显示'：'无'}）;
$（parent_upload_fields）.addClass（'有-五张照片'）;
}其他{
$（parent_upload_fields）.removeClass（'有-五张照片'）;
} 如果（IE7）{
updateTinyScrollbar（）; }其他{
$（'。上载的照片列表）perfectScrollbar（更新）。 VAR scrollbar_style = $（，parent_upload_fields'PS-滚动-X轨。'）的.css（'显示器'）; 如果（scrollbar_style =='块'）{
$（parent_upload_fields）.addClass（'具有完美-滚动条'）;
}其他{
$（parent_upload_fields）.removeClass（'具有完美-滚动条'）;
} } }
}
这是HTML：
＆LT; DIV CLASS =上载照片clearfix=服务器＆GT; 其中p DIV CLASS =上载的照片，加上ID =Q0011_00=服务器＆GT;
＆LT; ASP：AjaxFileUpload ID =AjaxFileUpload1=服务器AllowedFileTypes =JPG，JPEG，PNG，GIFOnClientUploadComplete =onClientUploadCompleteOnClientUploadCompleteAll =onClientUploadCompleteAllOnClientUploadStart =onClientUploadStart＆GT;＆LT; / ASP：AjaxFileUpload＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =上载的照片列表＆GT;
＆LT; DIV CLASS =上载照片列表-内clearfix=服务器ID =divUploadListDynamic0011_00＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; / DIV＆GT;
解决方案
如果图像文件的不的 crossOrigin （见的 canvas.toDataURL（）引发SecurityError ，的了解HTML5的Canvas图像的安全规则），应该能够检索数据-URI 图像的再presentation 文件使用的 HTMLCanvasElement.toDataURL（）。如果图像文件，或的src 的是的 crossOrigin ，可以利用的FileReader 检索数据-URI DOM 的>的 IMG 元素的 - 为键入 的text / html - 而不是<的code>画布 .toDataURL（）（键入 图像/ PNG ），以避免可能的CORS问题与污染 画布（见上面的链接）
尝试
VAR体= document.body的;
VAR IMG =使用document.createElement（img目录）;
//`value`：`img`路径（本地，_not_`crossOrigin`）
img.src =价值;
//设置`display`：`none`在`img`如果_not_显示原生态`img`
// img.style.display =无;
body.appendChild（IMG）;
VAR帆布=使用document.createElement（画布上）;
//设置`display`：`none`在`canvas`，
//如果_not_显示`canvas`（`thumbnail`）
变种CTX = canvas.getContext（2D）;
body.appendChild（画布）;
`thumbnail`形象//`数据uri`
//获取`base64`编码只，`datauri.split（）[1]`
//`datauri.split（，）
VAR datauri;
img.addEventListener（加载功能（E）{
//调整``thumbnail` width`，`height`这里
canvas.width =50;
canvas.height =50;
ctx.drawImage（e.target，0，0）;
//``img`数据uri`，调整为``canvas` width`，`height`
datauri = canvas.toDataURL（）;
//做的东西用``datauri`的img`
body.appendChild（使用document.createElement（BR））;
//``datauri`形象thumbnail`的
body.appendChild（document.createTextNode（datauri））;
返回false
}，FALSE）;
\r
\r\r
\r VAR值= \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABa0lEQVR4Xu3VwQkAQAjEQO2/aA+uijzGCkLC4s7cjcsYWEEyLT6IIK0egsR6CCJIzUCMxw8RJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhWIggMQMxHAsRJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhPE5Hx53K44yoAAAAAElFTkSuQmCC\";\r
VAR体= document.body的;\r
VAR IMG =使用document.createElement（img目录）;\r
//`value`：`img`路径（本地，_not_`crossOrigin`）\r
img.src =价值;\r
img.title =原始图像;\r
//设置`display`：`none`在`img`如果_not_显示原始`img`（左）\r
//这里diplayed查看原图像之间不同的尺寸，\r
//缩略图（右）\r
// img.style.display =无;\r
body.appendChild（IMG）;\r
//原始图像和`thumbnail`图像之间的空间\r
body.appendChild（document.createTextNode（））;\r
VAR帆布=使用document.createElement（画布上）;\r
canvas.title =缩略图\r
变种CTX = canvas.getContext（2D）;\r
body.appendChild（画布）;\r
VAR datauri;\r
img.addEventListener（加载功能（E）{\r
//调整``thumbnail` width`，`height`这里\r
canvas.width =50;\r
canvas.height =50;\r
ctx.drawImage（e.target，0，0）;\r
//``img`数据uri`，调整为``canvas` width`，`height`\r
datauri = canvas.toDataURL（）;\r
//做的东西用``datauri`的img`\r
body.appendChild（使用document.createElement（BR））;\r
body.appendChild（document.createTextNode（datauri））;\r
返回false\r
}，FALSE）; \r
I have a function in jquery that allows me to get the name of a file that was uploaded in ie7. I am able to get the name of the file, but I am also trying to get the base64 string of the file. Is there any way to alter this function below to do that?
var thumbnail_title_preview = {
update: function(value, event_target) {
var parent_upload_fields = $(event_target).parents('.upload-photos');
var photos_list = $('.upload-photos-list-inner', parent_upload_fields);
var thumbnail = document.createElement("div");
$(thumbnail).addClass('uploaded-thumbnail-title');
var file_name = value;
if(ie7) {
file_name_array = file_name.split('\\');
file_name = file_name_array[file_name_array.length - 1];
} else {
file_name = file_name.replace('C:', '');
file_name = file_name.replace('D:', '');
file_name = file_name.replace('\\fakepath\\', '');
}
if(file_name.length > 12) {
file_name = file_name.substring(0, 12) + '...';
}
$(thumbnail).append('<p>' + file_name + '</p>');
$(thumbnail).append('<a class="remove-photo" href="#"></a>');
$(photos_list).append(thumbnail);
var number_of_thumbnails = $('.uploaded-thumbnail-title', parent_upload_fields).length;
$(photos_list).css({ 'width': number_of_thumbnails * (117 + 20) });
if(number_of_thumbnails == 5) {
$('.upload-photos-add', parent_upload_fields).css({ 'display': 'none' });
$(parent_upload_fields).addClass('has-five-photos');
} else {
$(parent_upload_fields).removeClass('has-five-photos');
}
if(ie7) {
updateTinyScrollbar();
} else {
$('.upload-photos-list').perfectScrollbar('update');
var scrollbar_style = $('.ps-scrollbar-x-rail', parent_upload_fields).css('display');
if(scrollbar_style == 'block') {
$(parent_upload_fields).addClass('has-perfect-scrollbar');
} else {
$(parent_upload_fields).removeClass('has-perfect-scrollbar');
}
}
}
}
This is the html:
<div class="upload-photos clearfix" runat="server">
<div class="upload-photos-add" id="Q0011_00" runat="server">
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" AllowedFileTypes="jpg,jpeg,png,gif" OnClientUploadComplete="onClientUploadComplete" OnClientUploadCompleteAll="onClientUploadCompleteAll" OnClientUploadStart="onClientUploadStart" ></asp:AjaxFileUpload>
</div>
<div class="upload-photos-list">
<div class="upload-photos-list-inner clearfix" runat="server" id="divUploadListDynamic0011_00">
</div>
</div>
</div>
解决方案
If image file is not crossOrigin (see canvas.toDataURL() SecurityError , Understanding the HTML5 Canvas image security rules) , should be able to retrieve data-uri representation of image file utilizing HTMLCanvasElement.toDataURL() . If the image file , or src is crossOrigin , could utilize FileReader to retrieve data-uri of DOM img element - as type text/html - instead of canvas's .toDataURL() (type image/png) , to avoid possible CORS issue with tainted canvas (see links above)
Try
var body = document.body;
var img = document.createElement("img");
// `value` : `img` path (local , _not_ `crossOrigin`)
img.src = value;
// set `display`:`none` at `img` if _not_ displaying "original" `img`
// img.style.display = "none";
body.appendChild(img);
var canvas = document.createElement("canvas");
// set `display`:`none` at `canvas` ,
// if _not_ displaying `canvas` (`thumbnail`)
var ctx = canvas.getContext("2d");
body.appendChild(canvas);
// `data-uri` of `thumbnail` image
// to retrieve `base64` encoding only , `datauri.split(",")[1]`
// `datauri.split(",")
var datauri;
img.addEventListener("load", function(e) {
// adjust `thumbnail` `width` , `height` here
canvas.width = "50";
canvas.height = "50";
ctx.drawImage(e.target, 0, 0);
// `img` `data-uri` , scaled to `canvas` `width` , `height`
datauri = canvas.toDataURL();
// do stuff with `datauri` of `img`
body.appendChild(document.createElement("br"));
// `datauri` of `thumbnail` image
body.appendChild(document.createTextNode(datauri));
return false
}, false);
var value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABa0lEQVR4Xu3VwQkAQAjEQO2/aA+uijzGCkLC4s7cjcsYWEEyLT6IIK0egsR6CCJIzUCMxw8RJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhWIggMQMxHAsRJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhPE5Hx53K44yoAAAAAElFTkSuQmCC";
var body = document.body;
var img = document.createElement("img");
// `value` : `img` path (local , _not_ `crossOrigin`)
img.src = value;
img.title = "original image";
// set `display`:`none` at `img` if _not_ displaying "original" `img` (left)
// diplayed here to view different dimensions between "original image" ,
// "thumbnail image" (right)
// img.style.display = "none";
body.appendChild(img);
// space between original image and `thumbnail` image
body.appendChild(document.createTextNode(" "));
var canvas = document.createElement("canvas");
canvas.title = "thumbnail image";
var ctx = canvas.getContext("2d");
body.appendChild(canvas);
var datauri;
img.addEventListener("load", function(e) {
// adjust `thumbnail` `width` , `height` here
canvas.width = "50";
canvas.height = "50";
ctx.drawImage(e.target, 0, 0);
// `img` `data-uri` , scaled to `canvas` `width` , `height`
datauri = canvas.toDataURL();
// do stuff with `datauri` of `img`
body.appendChild(document.createElement("br"));
body.appendChild(document.createTextNode(datauri));
return false
}, false);
这篇关于获得输入图像的base64在IE7？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
