相关疑难解决方法(0)

我有一个带有一些图像的常规HTML页面(只是常规的<img />HTML标签).我想得到他们的内容,优选base64编码,而不需要重新下载图像(即它已经被浏览器加载,所以现在我想要内容).

我很想用Greasemonkey和Firefox实现这一目标.

我可以将文件作为multipart发送XMLHttpRequest到servlet吗？我正在制作一个表单并将其作为multipart提交,但不知何故我没有得到成功上传它的响应.我不希望刷新页面,因此必须由ajax进行.

使用html2canvas如何将屏幕截图保存到对象？我一直在探索演示,并看到生成屏幕截图的函数生成如下:

$(window).ready(function() {
  ('body').html2canvas();       
});

我尝试过的是

$(window).ready(function() {
  canvasRecord = $('body').html2canvas(); 
  dataURL = canvasRecord.toDataURL("image/png");
  dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  upload(dataURL);

});

然后,我将其传递给我的upload()函数.我遇到的问题是,我无法弄清楚在html2canvas()库中制作屏幕截图的位置或者什么函数返回它.我试着转换使用Canvas对象这从SO答案(虽然我不能肯定我需要做到这一点).

我只问了一个问题,关于如何上传文件到imgur,有答案(尤其是@ bebraw的)帮助我明白我需要做的.

该upload()函数来自Imgur示例api帮助:

function upload(file) {
   // file is from a <input> tag or from Drag'n Drop
   // Is the file an image?
   if (!file || !file.type.match(/image.*/)) return;

   // It is!
   // Let's build a FormData object
   var fd = new FormData();
   fd.append("image", file); // …

我希望能够使用Javascript将文件扩展名下载Html5 canvas元素作为图像.

该CanvasToImage库似乎并没有能够做到这一点.

到目前为止,这是我的代码,你可以在这个JsFiddle看到.

<div id="canvas_container">
</div>
<p>
<a href='#' id="create_image">create</a> 
<a href="#" id="download_image">download</a>
</p>




$("#create_image").click(function() {
var cnvs = createSmileyOnCanvas();
$('#canvas_container').append(cnvs);
});


$("#download_image").click(function() {    
var img = $('#smiley_canvas').toDataURL("image/png");
var uriContent = "data:application/octet-stream," + encodeURIComponent(img);
window.open(uriContent, 'download smiley image');
});



function createSmileyOnCanvas() {
var canvas = document.createElement('canvas');      
canvas.id = 'smiley_canvas';    
var ctx = canvas.getContext('2d');        

// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye …

伙计们，我一直在搜索如何在推特上发布图像画布的示例和教程，但我没有找到一个。我已经知道如何在 Facebook 上（我找到了一个很好的例子）。有人能帮我吗？