相关疑难解决方法(0)

在HTML中嵌入PDF的推荐方法是什么？

• 的iFrame？
• 宾语？
• 嵌入？

Adobe对此有何看法？

就我而言,PDF是即时生成的,因此在刷新之前无法将其上传到第三方解决方案.

我正在使用Javascript window.atob()函数来解码base64编码的字符串(特别是GitHub API中的base64编码内容).问题是我得到了ASCII编码的字符(â¢而不是™).如何正确处理传入的base64编码流,以便将其解码为utf-8？

我需要在Javascript中将dataURL转换为File对象,以便使用AJAX将其发送出去.可能吗？如果是,请告诉我如何.

我想使用fabric.js将Canvas下载为PNG.在下载时我想缩放图像.所以我使用multiplier了toDataURL()函数的属性.但我得到了失败 - 网络错误

PS:如果我不给multiplier属性,它正在下载,但我确实想要使用multiplier属性,因为我必须缩放图像

这就是我在做的事情:

HTML代码:

<canvas width="400" height="500" id="canvas" ></canvas>
 <a id='downloadPreview' href="javascript:void(0)"> Download Image </a>

JS

document.getElementById("downloadPreview").addEventListener('click', downloadCanvas, false);

var _canvasObject = new fabric.Canvas('canvas');

var downloadCanvas =    function(){
    var link = document.createElement("a");

link.href = _canvasObject.toDataURL({format: 'png', multiplier: 4});
      link.download = "helloWorld.png";
     link.click();

}

这是我现在用来使用HTML5 File API上传多个图像的代码片段:

/**
 * @param {FileList} files
 */
upload: function(files){
    nfiles = files.length;

    for (var i = 0; i < nfiles; i++) {
        /** @var file File **/
        var file = files[i];

        var xhr = new XMLHttpRequest();

        xhr.open("POST", settings.post_upload, true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.upload.filenumb = i;
        xhr.filenumb = i;
        xhr.upload.filename = file.name;

        var nef = new FormData();
        nef.append("folder", settings.folder);
        nef.append("file_element", settings.file_elem);
        nef.append("udata", settings.user_data);
        nef.append(settings.file_elem, file);
        xhr.send(nef);

    }
}

我想在使用canvas对象上传之前调整图像大小,但没有相关经验,我不知道如何使用技术更新代码,例如下面描述的那些:HTML5在上传之前预先调整图像大小

canvas.toDataURL("image/png");将返回一个编码的字符串.但是我需要发布这个File对象.

编辑

如何(合理地)为大多数现代浏览器编写跨浏览器功能,以便在上传之前调整文件大小,处理具有透明度的jpg,png和gif: …

我有一个具有文件上传字段的表单页面,我试图以编程方式设置该字段的值,虽然我知道由于安全原因它是不可能的,但我想知道我们是否仍然可以？如果有插件或我可以用来执行上传的东西.我有设置该字段所需的文件字段的Base64值,我需要知道的是有没有办法设置它.

在这方面,任何建议或帮助都会很棒.

谢谢.

更新: 添加了一个JsFiddle来演示我正在尝试的内容.

请访问此网站,使用js小提琴中的示例创建一个文本文件,并使用此链接进行转换.

var str = `text`;

http://www.motobit.com/util/base64-decoder-encoder.asp

的jsfiddle

注意:

下面的答案反映了2009年遗留浏览器的状态.现在,您可以在2017年使用JavaScript动态/编程地设置文件输入元素的值.

有关详细信息和演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)？

我用这个代码从数据URI XMLHttpRequest生成Blob:

function dataUrlToBlob(dataUrl, callback) {
    var xhr = new XMLHttpRequest;
    xhr.open( 'GET',  dataUrl);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function(e) {
        callback( new Blob( [this.response], {type: 'image/png'} ) );
    };
    xhr.send();
}

用法:

dataUrlToBlob('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=', callback);

除Safari外,所有浏览器都能正常运行.它抛出这样一个错误:

[错误] XMLHttpRequest无法加载数据:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII =.仅支持HTTP的跨源请求.

问题是,有没有办法让这种方法在Safari中运行？

我有一个恒定的 Base64 编码 jpg 文件源，大约每秒 1-5 个图像，创建一个简单的视频流。它们是这样的：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

将它们输入到 img 元素的 src 属性中会在后台触发由浏览器缓存的请求：

由于每个帧都被缓存，我的应用程序会在短时间内填充浏览器缓存。

1. 如何避免这种缓存行为，以便每个帧要么不被缓存，要么被缓存很短的时间？
2. 如果这是不可能的，那么我如何才能相当快地显示来自流的 jpg 二进制数据*并且无需缓存？

* 我尝试使用jpg.js将原始二进制 jpg 数据解码为原始像素并将它们渲染在 Canvas 上，但这在时间和 CPU 消耗方面成本太高

我已经用这个将图像文件上传到API（Graphcool），并且一切正常：

fileUpload(file) {
        let data = new FormData();
        data.append('data', file);

        axios
            .post(`https://api.graph.cool/file/v1/MY-PROJECTID`, data, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            })
            .then(res => {
                console.log(res)
            });
    }

在上面的代码中，文件是从 <input type="file" />

但是现在我正在使用React Avatar Editor来允许用户裁剪图像并确保它们是正方形的：https : //github.com/mosch/react-avatar-editor

当您从React Avatar Editor访问图像时，它以数据URL的形式出现（通过Canvas.toDataURL（））。

如何使用Axios上传数据URL？我是否需要先将图像转换为浏览器内存中的实际“文件”？

我使用dropzone.js上传文件。但是我的文件在上传之前已经过预处理。最后blob，我要上传一个。不幸的是，只有一种addFile()方法可用，而没有任何addBlob()方法。我知道我可以这样使用File构造函数：

new File([blob], 'filename', options)

但构造函数在IE / Edge中不可用。

有什么办法可以将blob附加到dropzone.js队列吗？

我收到JPG图片的多个Base64 URI。

我需要将它们另存为jpg文件。

我正在尝试使用FileSaver.js，但对我来说不起作用。

以前，当我从aws-sdk获取图像时，我使用过filesaver.js，其中的数据采用缓冲区形式，并且可以正常工作。

但是，它不适用于base64字符串。

var base64 = '/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBxdWFsaXR5ID0gODUK/9sAQwAFAwQEBAMFBAQEBQUFBgcMCAcHBwcPCwsJDBEPEhIRDxERExYcFxMUGhURERghGBodHR8fHxMXIiQiHiQcHh8e/9sAQwEFBQUHBgcOCAgOHhQRFB4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4e/8AAEQgAYABgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+VFOG5HWvbP2bvB2keKNI8Y3194bXxFfaXa272Nk961srs7sGy4Zew7mvD1J4Oa9M+D/AI50TwzovifQvEOj3mpaf4gtoYZfslysMkfluWGCykc59O1ap6aGUkdj4l8Gw3XifT9GufDujfDhmt5JvNudWe6inAKgAkF9p64HfJrT8G/DLRf+Fj+GNK1DxTofiKx1C7eKe206eUOFWJ3yxKqQMqBwc1xK+MdG8O6tbar8MINb0G9WOSO4lvbqK53o23AUeWAOhz17V0Ph/wCNHilfGOg654r1GfW7XSbhp1ttkcZy0bJkFVHZu9dCc7aHO+VPU9O8I/CPwXefFDWP7Q0+WXwtPa2UmkQm4dSzXS7l+YHJ27JOprxDTvhpc6np6avfeI9D8PWN7fS2el/2nM6m7dG2tjYjbVBIBZsAGvX/AIffEfULrQfB1lLpJP8AYF81zO3m4a5QCRYVHHAUSt1JHA9eFj8M+Hdb8JaRo3ijRtVuYdEu7m4tPIuViyJZA8kMuVOVLfxDBx098JYjldpM2VJPVI8b13wXYaV8B9S1y9tVHiKx8YnSJJ0nLoI1tyzIMHaRuGd361m+BPDGi6r8EfiN4kvrVpNT0ZtO+wy+Yw8rzZmV+AcHIHfPtXrl/aaBY+AtX8La74Tu7rTbzXW1y1tNHvVhaD90IxGNysSo5x+FeYXPijSNE8KeOfBWgeGNUs7XxIbD7OLy9SV7cwOXfcQoB3Z4Has3UUtjRKx6L8Vfh5onhLSHm0j4Nx6ppkWjxXMusya7KjI7RZdvK8znaecAYNYfhxvhXefBrW/G0/woga40i9tbIw/25dATmQcuTn5fpg1x/wAWdbfx/wCK7fXBpFxZLFYW1o0LSq+/yowpII9Tn8Kj0fVL6y+EniLwMNDmaTVtRtryO4Eq7YlizlSOpJ4/Wpuijz++mt7jUbmeztRZ28kzPFbhy4iQnITceTgcZPJqxbEbxxRNpGoWygz2zoPenWwIcAitoNESKVtBPcyMkEZfapcgdgBkmtWVdIjt4orT7XPcFQZJHIRASOgXknB755p3hW1vZ4b57OZY9sTbx5e4suDx7VkwXPlXCSIudvUHvWSldjaPcb34UabdfCK38deGtXmnmUww3NnKo/1zMqMqnjGGYde3euV8GeHLm98Xf2LqNrLBPbyFJ45Bt2EdQc/yq3Y/Ee2tfh9ceH7PVb2za6uIppYEs43jLIyndvLbhjb0A5wK9QtLe1l8d6D4ng8UjXoNcSTfL9jSDDxhB8+3uM9/SpVWcYtPzE6alK56J4e8LaTbaSbTymWONefmxye9dXBo6TW5AJYMecj2quLq1bT1+z3Ec0Yw5ZccEEVuaJrWlyX76UtwGu1UNtwRwffGPwzXC7s32ON13R5LFWkt9Pt5QSPMbJ3lfY+vtXi/xa8KafeWM99bWrxzbdwaI4ZT784r6U8Z3+k6Zbquo31ramdtkQmlCl2xnAyeTXnN79nfQpn8xBukYMQ3UAnP6VcLx1Jep8ZRx6m8zRxTXbgDtIf8anhi1FWlJnn/AHX3lZz/AI11Hjyyg0i8uNRsNVlZJpCvlbQzxg84J3Zx74rkRqkiMwBY92zCM/nmuvfYgszCeEkXMLN77jVaFv3p+UgdqLi/uL5S5l2KCFKhcZ4PP6VHFITLubn3qouwMj0/VLnTre4S1dkaddpYdh3rNyc1IrokoEqloz1AOD9RWpp6+GhpFy95PqL6iYyII0iURK+eCzbskfhUJ2GzNkingCGaJ4w6hkLKRuX1HqK9k+C+oaLda/peixfao7e0ElyZX25mmK4bPPyrgDgenJpl58SPBF58GrXwte6LdT61a2bwQTtBGVjcsSGDE5A/CuO8OeP7vTdak1W5tIp5ioEaIoRFwNo4HYDsPSpbco7Bsz6vTUINO8R6Ra2sWNJ1KNo5Nyn5ZA4U4zzghkP4111/4VGm3F14gk1G5eQoFjjadvLiAPBVegPPX2H4/OPhzx9BrHxM0K2tZZY7N3aSaKU8K3ynI9CfLGQMCvc/iF4o1tNMg07RPDV1rETxB5bmK4SMRncRgbuGYY6f41hy62KvoXNf8Of8JJfy3E15cwXdjc74wCpRlZBtBDA9M54xXj3jhfEOoagujeHdLlksrLe4nQZZgJDG2c8DDL7/AHs8V6J4Y8Y649pqcviXQ76xbaT9qn2BCFHy428Dr75rzv4ffFGysdej+zW9zrE+6RLxWA8nym6lVHLBVbpxkjrWkUZvc4+b4aeNvG13CILe1SSC2ea5E8mwgo2wBgBwxIxjvg9K9A8B/s+WmmaM/wDwm/hi61nUjOsh+wamqRhCBiMg4JPUn+degfAXULvxZ498U3eh+IEk0uEW7ebJpoieWVy5cFSeoIPPvXO/GiLxxefHrRPB0GttDZXKLJHJBefYt2VbfnGSfuHpnJOKp81n5FLoeF/FnwHZ+Go5mtNNmsE/tR4CJLoS4G12CjvtA43HrzXl9u2GAznvXr3jyewbwlfxG8ubu+h8TLb3RuJGkICQyrgMeSOvNePcpclemDiqV7CKc5ww9aVMsQAma2fDMkMOro0zMuDkYjVv0bitXWNZmXQLLRYbgPbmWS6kj8lFKvvdV+YDJ4ycHjmgZg29mj48w4wfmAzkD8e1aUdrFGx8qNSy/dOM/rWdKzLH8uVOOh9PatHT9yxx4G95B8oHcntQJmes93p+oxX1rK0NxA4eN1PKsDkGvc/hj8efsF0qa3ILRGU+ZmAywM/94bfmjyeSAGGegFeR3+nXCTtb3NnNHOGKtE0ZVgR2INQv4X1bELR6Vfss+3y8wNh9xAXbxzkkAY65pSSe4Jnpfx3+K8HjWT7BZ380tjGmFitYmhikc/xMz4ZgP7u1a860dprZEuYm8t0wQR/Dj+Y9qu2HgzWzdfZm0a9S4O7EbQsGbaCTjI9AT+FXZtNuLK3UTWU8St3eMgdx3+hqvIRt/Dfx/wCJvCWpXEmmazJYx3bM0ojtUkVXOSCAR8o3DoOxr1nw7r2s+JfDx+K2q6TbeLPFdhdrHaxWVybeext4skExqrK+9mOBjJzx04+em2RTmJsmEKTjPXOML9OP51v+BfHev+ANdGveHbhY5hGUaKUExTKezLkcenfIz60mhmHruqandC7vNQWRZtQ1L+0XywDM7CTcc/UnsK5NpGkuWdizEnkk5Ndn4j8RRavHp1xdpCLlEmmn2xABnd2Y/wDoXFcYjK1yWGAGPAHamCLOm3DWeoeYsKyEDo2MAZ969V+E3wU1v4iOdXuruPSrGdyyZj3OwJzkDgAf5xXlVuIzqIWQMVYYIA619y/A+/jl0u1t4QEWOJcKPcVhVm47FxSe5i2f7I2hvpTQv4uvxMwO0m1jKg/TIz+dfNPj/wAHan8O/G954Xv5Umms3EkFwowssZ5VgD+o9QRX6NQPqeMpHC8WMgByG/z+NfH37ZOk+IbjxZZ64+gahHEkbxyXIi3xhdw2gsuQOM9aqErrUiWjPNW+JvjUAE6wHZE27mt4yfvbu6+/6Vnv4o1260uOxkvA0MSBExEmVAKkAHGRyi/lWEmJkyBwy49atWkTsq4/GtAsbb+K/EUiqbjWb13wQoMxPVSp+gwxH4+9Ran4r12+0+Szu9Snlt2AHlyNuUEE4wD0OSenrVGO0vDJJLHayy4wkYCE+pyfbr9cVDZWt3f6ha2lrGz3FxMsNshXBklZgAfYZNF0hWIbe0kurmeVV3xx4jBIOCR1P5n9Kg1KIxKwclpCMgZ6frwP8/T7C8H/ALLltBodvFrXiWRbjYDJHawAqrHr8xPzfXAzVvXv2W/CUtmBHr+rLcYxvcIyn8AAf1pX6lWPhqSC78gTOCIk+QcdSfT1qCzH7wevevS/jd8NdU+GurrGbwahYysfJuApQq3XDKSeffJ6V5xau005dgASe1NAi7Y3UVjqyyyR+YrKV2g45NfYnwMSWKFJFQsgiRTzjDAc18aT20lzqUEEJUO7fKT0r6++EGsJp+kJNICuY1MsTnaynHUZrCsVB2PozSpm8hfMdeemO1aEhSZfLnjSRCOQRmuH0jxfbXEYEEbu2Om3rWwmraiwyLE4PA5H+NREGU9U+F/w01K5N3e+FNK89jkukIjZvqVxmuZ+JnhzwR4T8K/bdK8M6VEsJPC2y4ZgCRnjnOMZNdPqN7qh3xGFIg4ALu4AUHr05zXC/FyDVfEPhw6Bod2Zb1po/MIjLqgx3x0A4PPYVomupLPN5vidbrBJb6daiBXiAtpY4VAilA3+WPbP6NXsPgLVIfGfg6EPaRPKMo7mIErKoDK2McMCQRXkug/s8+Iri/WXVtZdbc/M5tolUhyACw3f4V9H/D/wtpng/QYdK0uB0iTJd5W3O7HqzHuTQ9XoNGtpQ1Boka8QRHaCUBzg45rN8X6j9ltw6vt5A+tamoXwhjPzKfxrjPEkd3quzKJFbxyCSSQtkBVOePrj9aJNJWGj5Z/bM1z7RfW+neWeH3bvw/8Ar1876UMsT716l+1RrK6l48MCEYiTJx/tHj9MV5ho/Kk5zya22SRJ/9k='

saveAs(new Blob([base64], {type: "image/jpeg"}),"filename.jpg")

我也尝试过：

saveAs(new Blob([base64], {type: "image/jpeg;base64"}),"filename.jpg")

saveAs(new Blob([atob(base64)], {type: "image/jpeg"}),"filename.jpg")

我还尝试过将data:image/jpeg;base64,base64字符串用作后缀。

文件已保存，但是图像已损坏。在某些情况下，文件仅包含base64字符串。如何将它们另存为二进制文件？

我试图从onLoadingComplete道具中获取naturalWidth和naturalHeight：https://nextjs.org/docs/api-reference/next/image#onloadingcomplete但它不起作用？也许我做错了？

const handleImageLoad = (e) => {
  console.log("load", e);
};

<Image
  onLoadingComplete={(e) => handleImageLoad(e)}
  className=""
  src={image["data_url"]}
  alt=""
  layout="fill"
  objectFit="contain"
/>

onLoadingComplete={() => handleImageLoad()}