将Ajax响应图像元素放到Canvas上 [英] Ajax response image element onto Canvas

问题描述

我的网站上有一个上传照片按钮，可将jpeg和png格式的文件上传到数据库中，并在成功完成后在网站上显示照片.

I have an upload photo button on my website which uploads jpeg and png format files on the database.As well as it shows the photo on the website after successful completion.

成功完成后，ajax成功调用 after_success 函数，该函数将响应数据作为参数.

After successful completion, ajax success calls the after_success function which has the response data as its parameter.

功能如下:

function after_success(data){


}

响应数据如下:

<img src="uploads/56dda66be0181.png">

无论此响应产生的图像是什么，我都试图在画布上绘制.

Whatever image comes up from this response I was trying to draw it on the canvas.

我的解决方案:

var canv=document.getElementById("output");
var ctx=canv.getContext("2d");
var canimg=($('img',data));
ctx.drawImage(canimg,10,10);

但这似乎不起作用.如何在画布元素上获取图像?

But this didn't seem to work.How do i get the image on this canvas element?

注意:使用 Div 元素和jquery .html()，它确实在 Div 元素内显示图像.

Note: Using Div element and jquery .html() it does show the image inside the Div element.

推荐答案

function after_success(data){
    $('#hiddendiv').html(data);
    var img=new Image();

    img.src=$('#hiddendiv').find('img').attr('src');

    $('#hiddendiv').hide();

        var canv=document.getElementById("output");
        var ctx=canv.getContext("2d");
    img.onload= function () {
        ctx.drawImage(img,10,10);
    }

这就是我要做的事情.感谢@anubhab.给我一个关于如何执行此操作的基本思路.只需稍微调整一下他的代码即可.

This is what i did to achieve the same.Thanks to @anubhab.Gave me a fair Idea as to how to do this.Just tweaked his code a bit.

这篇关于将Ajax响应图像元素放到Canvas上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！