jquery实现从后端api接口获取图片并展示在前端，且实现下载图片功能

本文主要讲的是利用jquery脚本实现从后端获取指定图片，并在前端进行展示，同时实现对该展示图片的下载功能需求。没啥技术含量，仅做笔记和提供给需要的人拿去快速开发使用，比不重复造车轮。也为开源精神做一份贡献吧！

直接上代码了，不解释.

html代码:

<div class="form-group">
<label class="col-sm-3 control-label">二维码内容：</label>
<div class="col-sm-8">
<textarea id="code" name="code" class="form-control" aria-required="true" style="height: 50px;"></textarea>
</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">二维码：</label>
<div class="col-sm-8">
<a id="tttt"></a>
<img id="qr" src="" />
</div>
</div>

<div class="hr-line-dashed"></div>

<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-primary" id="submit" onclick="b_d()">生成二维码</button>
<button class="btn btn-white" onclick="down()">下载二维码</button>
</div>
</div>

jquery部分代码:

<script>
//提交数据到后端生成二维码后并在前端展示
function b_d(){
  var code = $("#code").val();
  var putdata = {
    'code':code
  };
  $.ajax({
    url:"https://www.32e.top/qr_api/'); ?>",
    type:'POST',
    cache:false,
    data:putdata,
    success:function (data) {
        console.log(data)
        if (data.success == true){
          $("#qr").attr('src',data.data);
          // $("#qr").css("width",data.width);
          // $("#qr").css("height",data.height);
        }else {
            swal("失败", "API接口请求失败,或内容为空", "error");
        }
    }
  });
}

/**
 * 根据图片生成画布
 */
function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;
}
/**
 * 下载图片
 */
function down() {
    var sampleImage = document.getElementById("qr"),
    canvas = convertImageToCanvas(sampleImage);
    url = canvas.toDataURL("image/png");//PNG格式
    //以下代码为下载此图片功能
    var triggerDownload = $("#tttt").attr("href", url).attr("download", "my_qr.png");
    triggerDownload[0].click();
//    triggerDownload.remove();
}

</script>

到这里前端功能就已经实现了，当然要完整的实现功能还需要配合后端的API给你生成二维码并返回json格式数据给你，再提示一下弹窗我上面是有的是sweetalert，sweetalert插件是需要你自己加载的，当然你也可以删除这个弹窗提示。