将toDataUrl base64字符串转换为页面上的图像 [英] turn toDataUrl base64 string into image on page

问题描述

我创建了一个自定义的产品配置器，我使用html2canvas来生成一个canvas元素的base64编码字符串。

如果您访问： http：// faithpointdallas .com / ecom / page / customStole 您可以看到，当您点击底部的添加到购物车时，它使用html2canvas脚本提醒生成的base64编码字符串。

我的问题是：我如何获取base64编码的字符串，并将其变成一个常规的图像标签。像< img src =myconvertedbase64string.PNG/>

这里是生成string：

  $（'＃addToCart'）click（function（event）{
 event.preventDefault ; 
 var target = $（'。customstole'）; 
 html2canvas（target，{
 onrendered：function（canvas）{
 var data = canvas.toDataURL b $ b alert（data）; 
 //数据是Base64编码的图像
} 
  

}）;
}）;

解决方案

这可能有帮助 - 它使用jQuery发布base64编码的URL到服务器，然后将其保存到具有一些PHP的文件：

http://www.rgraph.net/docs/integration-with-server-side-scripting.html#image p>

此外，你知道你可以直接使用toDataUrl（）返回的数据：url作为标签src？

I have created a custom product configurator and i am using html2canvas to generate a base64 encoded string of a canvas element.

If you go to: http://faithpointdallas.com/ecom/page/customStole you can see that when you click "add to cart" at the bottom, it uses the html2canvas script to alert a generated base64 encoded string.

My question is: How can i take that base64 encoded string and turn it into a regular image tag. Like <img src="myconvertedbase64string.PNG" />

Here is the code that is generating the string:

$('#addToCart').click(function(event) {
event.preventDefault();
var target = $('.customstole');
html2canvas(target, {
onrendered: function(canvas) {
    var data = canvas.toDataURL();
    alert(data);
    // data is the Base64-encoded image
}

}); });

解决方案

This might help - it uses jQuery to post the base64 encoded URL to the server and then saves it to a file with some PHP:

http://www.rgraph.net/docs/integration-with-server-side-scripting.html#image

Also, did you know that you can use the data: url returned by toDataUrl() directly as the tag src?

这篇关于将toDataUrl base64字符串转换为页面上的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！