Question

我正在构建一个Web应用程序，应该使用Flickr api和javascript在Flickr中搜索图像，然后单击搜索结果中的图像，您应该能够直接在浏览器中编辑图像（不保存图像第一）。我认为使用canvas是一个好主意，但如果图像没有在计算机上本地存储，我就无法编辑图像。这是我所拥有的（问题出在哪里）的一部分：

var editor = document.getElementById("editor"),
            context = editor.getContext("2d"),
            image = $("<img/>", {
                        src: "cat.jpeg", //i want a source in form of "https://pbs.twimg.com/profile_images/551143684671291392/Nx_lx21L_400x400.jpeg" instead. 
                        load: function() {
                            context.drawImage(this, 0, 0);  
                        }
                    }),

因此，如果我将src设为“https://pbs.twimg.com/profile_images/551143684671291392/Nx_lx21L_400x400.jpeg”，则图片不可编辑。

这是我职能的一部分：

(function($){
        //get canvas and context
        var editor = document.getElementById("editor"),
        context = editor.getContext("2d"),
        image = $("<img/>", {
                    src: "cat.jpeg", //get the image src here from flickr... how to get enlargedPhoto. that works
                    load: function() {
                        context.drawImage(this, 0, 0);  
                    }
                }),

            //get the toolbar to work
                //toolbar functions
                tools = {

                    //output to <img> 
                    save: function() {

                        var saveDialog = $("<div>").appendTo("body");

                        $("<img/>", {
                            src: editor.toDataURL()
                        }).appendTo(saveDialog);

                        saveDialog.dialog({
                            resizable: false,
                            modal: true,
                            title: "Right-click and choose 'Save Image As'",
                            width: editor.width + 35
                        });
                    },
                    rotate: function(conf) {

                        //save current image before rotating 
                        $("<img/>", { 
                            src: editor.toDataURL(), 
                            load: function() {
                                //rotate canvas
                                context.clearRect(0, 0, editor.width, editor.height);                           
                                context.translate(conf.x, conf.y);
                                context.rotate(conf.r);

                                //redraw saved image
                                context.drawImage(this, 0, 0);  
                            }
                        });
                    },
                    rotateL: function() {
                        var conf = {
                            x: 0,
                            y: editor.height,
                            r: -90 * Math.PI / 180
                        };
                        tools.rotate(conf);
                    },
                    rotateR: function() {
                        var conf = {
                            x: editor.width,
                            y: 0,
                            r: 90 * Math.PI / 180
                        };
                        tools.rotate(conf);
                    },........

HTML：

<form class="search-form" method="get" action="/">
        <input id="search-form-q" type="search" placeholder="Type a keyword to search on Flickr" />
        <button type="submit">Search</button>
    </form>
    <div id="imageEditor"> 
        <section id="editorContainer"> 
            <!--<img id="picture" src="">-->
            <canvas id="editor" width="480px" height="480px"></canvas> <!-- put the img-tag here -->
        </section> 
        <section id="toolbar"> 
            <a id="save" href="#" title="Save">Save</a> 
            <a id="rotateL" href="#" title="Rotate left">Rotate Left</a> 
            <a id="rotateR" href="#" title="Rotate right">Rotate Right</a> 
            <a id="resize" href="#" title="Resize">Resize</a> 
            <a id="greyscale" href="#" title="Convert to grayscale">B&W</a> 
            <a id="sepia" href="#" title="Convert to sepia tone">Sepia</a> 
        </section> 
    </div>

我有一个函数正确地返回我在搜索结果库中单击的图像的src。问题是在画布中获取此src。我该怎么办？这不是一个顺便上网的网络应用程序。

在画布中使用非本地存储源的图像

0 个答案: