Question

我尝试集成插件在这里演示：http://makg10.github.io/jquery-meme-generator/ 这里的js代码和read.me：

(function($){

    var i18n = {
        topTextPlaceholder: "TEXTE HAUT",
        bottomTextPlaceholder: "TEXT BAS",

服务器端和客户端，如果我直接将图片的网址放在我的HTML中，它对我有用。

如果我使用除了图像不会调整大小以上传外，它也有效。我对画布非常糟糕，我根本不知道我是否可以直接在插件代码中处理图像的大小，或者我是否必须调整图像的大小＆＃34;之前＆＃34;与其他功能？（）

非常感谢您的帮助

Answer 1

最后，解决方案是客户端。这是关于图像在上传之前调整大小...不再。答案已经存在于上面的许多主题中。抱歉。无论如何，这里是代码：

    function readURL(input) {
        if (input.files && input.files[0]) {
            var current_file = input.files[0];
            var reader = new FileReader();

                reader.onload = function (event) {
                    var image = new Image();
                    image.src = event.target.result;

                    image.onload = function () {
                        var maxWidth = 500,
                                maxHeight = 500,
                                imageWidth = image.width,
                                imageHeight = image.height;


                        if (imageWidth > imageHeight) {
                            if (imageWidth > maxWidth) {
                                imageHeight *= maxWidth / imageWidth;
                                imageWidth = maxWidth;
                            }
                        }
                        else {
                            if (imageHeight > maxHeight) {
                                imageWidth *= maxHeight / imageHeight;
                                imageHeight = maxHeight;
                            }
                        }

                        var canvas = document.createElement('canvas');
                        canvas.width = imageWidth;
                        canvas.height = imageHeight;
                        image.width = imageWidth;
                        image.height = imageHeight;
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(this, 0, 0, imageWidth, imageHeight);

                        $('#example').attr('src', canvas.toDataURL(current_file.type));
                    }
                }
                reader.readAsDataURL(input.files[0]);
        }
    }
                    $("#inputfiles").change(function(){
                        readURL(this);
                    });

插件模因生成器和输入文件的麻烦

1 个答案: