如何调整临时图像文件的大小以提高性能？

Question

我正在构建一个Instagram应用程序，您可以上传图像并为其添加过滤器。 上传图像时，您可以使用过滤器预览所选图像。 在桌面上，过滤器显示工作顺利，但在iPhone 6S上，滚动过滤器是滞后和缓慢的。 过滤器只是CSSGram的css类。

可视化的图像： https ： //1drv.ms/u/s！AuzQwOkGzbwfmZZbYMI6V-Kxk4Myig

我知道如何在保存之前调整文件大小。 在检查过滤器图像时，尺寸不是很大，所以我不明白为什么它在iPhone上这么慢。

// the javascript file
var uploader = document.getElementById('image');

image.addEventListener("change", function(event){
    // select all hidden elements and show them as soon as an image is selected
    var elements = document.querySelector(".filters");
    var imageWrapper = document.querySelector(".imageWrapper");
    elements.style.display="block";
    imageWrapper.style.display="block";
    var image = document.getElementById('output');

    var F_nofilter = document.querySelector(".F_nofilter");
    var F_1977 = document.querySelector(".F_1977");
    var F_aden = document.querySelector(".F_aden");

    var img = event.target.files[0];



    image.src = URL.createObjectURL(img);
    F_nofilter.src=URL.createObjectURL(img);
    F_1977.src=URL.createObjectURL(img);

})

// some of the html code as an example
<div class="formField">
    <label for="image">Upload a picture</label>
    <div class="uploadFileWrapper">
        <input type="file" id="image" name="image"">
    </div>
</div>

<div class="imageWrapper">
    <figure>
        <img id="output" class="uploadedImage" visibility="hidden"/>
    </figure>
</div>

<div class="filters">
    <label for="filters">Select a filter</label>
    <div class="filterContainer">
        <div class="caption">
            <p>normal</p>
            <div class="filterButtons">
                <div class="nofilter">
                    <img class="filterOptions F_nofilter" visibility="hidden"/>
                </div>
            </div>
        </div>
        <div class="caption">
            <p>_1977</p>
            <div class="filterButtons">
                <div class="_1977">
                    <img class="filterOptions F_1977" visibility="hidden"/>
                </div>
            </div>
        </div>

我希望通过调整过滤器图像的大小来提高移动设备的性能。

Answer 1

即使图像在屏幕上看起来很小，它在内存中的表示仍然是相同的。 我假设对单个图像执行每个过滤器的计算就是让它陷入困境。

如果您使用要向其发送图像的外部库来添加过滤器，则可以使用画布来真正调整图像大小，并从画布中获取图像对象以提供给外部过滤器添加功能。

 function generateSmallPreviewImage(image, saclingFactor) { // Create an empty canvas and get its context var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); // This sets the size of the canvas based on the image size and a scaling factor // For example: scalingFactor = 0.5 will half the image size on canvas canvas.width = image.width * saclingFactor; canvas.height = image.height * saclingFactor; // This sets the fill color as white context.fillStyle = '#fff'; // This fills the bg with white color in case a png is uploaded with transparency context.fillRect(0, 0, canvas.width, canvas.height); // Draw image on the canvas. This also scales(resizes) it. context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height); // Create an empty image object var image = new Image(); // Set the image source as a base64 encoded image from canvas image.src = canvas.toDataURL('image/jpeg'); // Return the image return image; } 

现在，只要从<input type="file"/>选择图像，就调用此函数，并调用此函数以获得调整大小的图像。

这是调用函数的一种方法： element_to_append_image_to.appendChild(generateSmallPreviewImage(image_element, 0.5));

如果您需要更多说明，请与我们联系。