小编Lis*_*ish的帖子

当使用toDataUrl()来设置图像标记的来源时,我发现保存时的图像比原始图像大得多.

在下面的示例中,我没有为toDataUrl函数指定第二个参数,因此使用了默认质量.这导致图像比原始图像尺寸大得多.当指定1为完整质量时,生成的图像甚至更大.

有谁知道为什么会这样或者我怎么能阻止它？

            // create image
            var image = document.createElement('img');

            // set src using remote image location
            image.src = 'test.jpg';

            // wait til it has loaded
            image.onload = function (){

            // set up variables
            var fWidth = image.width;
            var fHeight = image.height;

            // create canvas
            var canvas = document.createElement('canvas');
            canvas.id = 'canvas';
            canvas.width = fWidth;
            canvas.height = fHeight;
            var context = canvas.getContext('2d');

            // draw image to canvas
            context.drawImage(image, 0, 0, fWidth, fHeight, 0, 0, fWidth, fHeight);

            // get data url …

背景:

我已经阅读了尽可能多的Mustache文档,但是我无法理解如何使用partials,甚至我是否正在以正确的方式使用Mustache.

以下代码工作正常.我的问题是我有三个Mustache文件,我想要包含并一次渲染所有文件.

我猜这是部分的意思,但我似乎无法使它工作.

问题:

我将如何在这个上下文中工作,以便我的三个Mustache文件被加载并且都被传递$ data变量？

我应该以这种方式使用file_get_contents作为模板吗？我已经看到使用Mustache函数,但我找不到足够的文档来使它工作.

ENV:

我从https://github.com/bobthecow/mustache.php使用最新版本的Mustache

我的文件是:
index.php(下面)
template.mustache
template1.mustache
template2.mustache
class.php

码:

// This is index.php
// Require mustache for our templates
require 'mustache/src/Mustache/Autoloader.php';
Mustache_Autoloader::register();

// Init template engine
$m = new Mustache_Engine;

// Set up our templates
$template   = file_get_contents("template.mustache");

// Include the class which contains all the data and initialise it
include('class.php');
$data = new class();

    // Render the template
print $m->render( $template, $data );

谢谢:

任何部分PHP实现的例子(包括必要的文件结构都需要)都会非常感激,所以我能够深入了解:)

我在上传之前使用画布来操作图像、裁剪、调整大小和优化。

我正在使用该toDataUrl()方法在操作后获取图像数据。我从这里得到了 base 64 编码的 PNG url。

我知道图像的文件大小开始，但我不确定如何在裁剪后获取图像的文件大小等......不上传图像。

就我所见，获取数据 url 的长度似乎与图像大小无关......而且我不确定如何获取我正在寻找的信息：操作后图像数据的文件大小，来自 base 64 编码的 PNG url。

此时上传图像有点违背目的，因为我需要所有这些都在客户端完成。我只需要确保图像< max在上传之前。

似乎在任何地方都没有对此的解释，任何信息都会有很大帮助。

我使用bind来改变'this'的范围,这样我就可以在click函数中使用'this'来引用我的generateContent函数.不幸的是,这意味着this.id不再起作用,因为'this'的范围已经改变.

在这种情况下,获取单击按钮的id的最佳方法是什么:

function help( doc ) {

    buttons: function() {

        $('.add-btn').click( function() {

        this.generateContent( this.id ) );

        }.bind(this));

    },

    generateContent: function ( id ){

    }

}

// This function binds a function to an object's scope.
Function.prototype.bind = function(scope) {
    var _function = this;
    return function() {
        return _function.apply(scope, arguments);
    }
}