Question

我创建了一个优惠券创建者系统，它使用HTML 5画布吐出你创建的优惠券的jpg版本，因为我没有在服务器上托管最终的jpg，我在检索URL时遇到了问题。在某些浏览器上，当我将图像拖到地址栏时，我得到的只是地址栏中的“data：”。但是在Windows上，如果我将它拖到输入字段中，有时它会吐出巨大的（> 200个字符）本地临时网址。如何使用javascript（？）查找我的优惠券创建者生成的图像的确切临时URL，并能够将其发布到同一页面上的输入表单中？另外，如果你们也知道答案，那将非常有帮助，因为我认为它与URL的检索相关：当我点击生成后点击“保存”的链接时，我该怎么办？它将创建的图像保存到用户的计算机？非常感谢！

这就是我现在在JS中用来生成图像的内容：

              function letsDo() {
                html2canvas([document.getElementById('coupon')], {
                    onrendered: function (canvas) {
                        document.getElementById('canvas').appendChild(canvas);
                        var data = canvas.toDataURL('image/jpeg');
                        // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

                        var mycustomcoupon = new Image();
                        mycustomcoupon.src = data;
                        //Display the final product under this ID
                        document.getElementById('your_coupon').appendChild(mycustomcoupon);
                        document.getElementById('your_coupon_txt').style.display="block";
                    }
                });
              }

以下是创作者的实时网址：http://isleybear.com/coupon/

Answer 1

我最终将此代码转储到上述js中。这是一个非常简单的修复。然后为了测试它，我设置了一个onclick html元素来显示源代码。

var mycustomcoupon = document.getElementById('your_coupon');
mycustomcoupon.src = data;

}
});
}


function showSource(){

var source = document.getElementById('your_coupon').src;
                        alert(source);
}

检索页面上临时canvas元素的绝对URL

1 个答案: