相关疑难解决方法(0)

我注意到Google发布的一篇博客文章提到,如果您使用的是最新版本的Chrome,则可以直接将剪贴板中的图片粘贴到Gmail邮件中.我尝试使用我的Chrome版本(12.0.742.91 beta-m),使用控制键或上下文菜单效果很好.

从这种行为我需要假设Chrome中使用的最新版本的webkit能够处理Javascript粘贴事件中的图像,但我无法找到任何对此类增强的引用.我相信ZeroClipboard绑定到按键事件以触发其闪存功能,因此无法通过上下文菜单工作(同样,ZeroClipboard是跨浏览器,帖子说这只适用于Chrome).

那么,这是如何工作的以及对启用该功能的Webkit(或Chrome)进行增强的地方？

我正在从数据库中检索Blob图像,我希望能够使用JavaScript查看该图像.以下代码在页面上生成一个损坏的图像图标:

var image = document.createElement('image');
    image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
    document.body.appendChild(image);

这是一个包含所有必需代码的jsFiddle,包括blob.完成的代码应正确显示图像.

我正在开发一个chrome扩展.

我在画布中打开一个图像文件,我对它应用了一些更改,然后我试图将它保存到HTML5文件系统API.

首先,我从画布中获取dataURL:

    var dataURL = canvas.toDataURL('image/png;base64'); 

然后只是数据:

    var image64 = dataURL.replace(/data:image\/png;base64,/, '');

然后我做一个Blob.

    var bb = new BlobBuilder();
    bb.append(image64);
    var blob = bb.getBlob('image/png');

然后我使用以下函数onInitFs()请求文件系统;

    function onInitFs(fs) {
      fs.root.getFile('image.png', {create: true}, function(fileEntry) {
        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function(fileWriter) {
        //WRITING THE BLOB TO FILE
        fileWriter.write(blob);
        }, errorHandler);
      }, errorHandler);
    }

    window.requestFileSystem(window.PERSISTENT, 5*1024*1024, onInitFs, errorHandler);

这会导致将损坏的文件写入文件系统.

我不知道我还能做些什么来完成这项工作.

有人可以指导我朝正确的方向发展.

以下是我用来完成此任务的函数的一些来源.

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method

http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-creatingempty

谢谢!

我尝试制作类似于GMail使用的图像上传功能.您从桌面复制(CTRL-C)图像并将其粘贴(CTRL-V)到网站上.然后通过XMLHttpRequest将图像上传到处理传入文件的php脚本,其中"处理"意味着重命名并存储在服务器上.

我已经可以获取图像(和-data),但我无法成功提交和接收XMLHttpRequest.我的Javascript代码看起来像这样:

  document.onpaste = function(e){
        var items = e.clipboardData.items;
        console.log(JSON.stringify(items));
        if (e.clipboardData.items[1].kind === 'file') {
            // get the blob
            var imageFile = items[1].getAsFile();
            console.log(imageFile);
            var reader = new FileReader();
            reader.onload = function(event) {
                console.log(event.target.result); // data url!
                submitFileForm(event.target.result, 'paste');
            };
        }
    };

 function submitFileForm(file, type) {
        var formData = new FormData();
        formData.append('file', file);
        formData.append('submission-type', type);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'php/image-upload.php');
        xhr.onload = function () {
            if (xhr.status == 200) {
                console.log('all done: ');
            } else {
                console.log('Nope');
            } …