/*生成二維碼圖片*/
function createQrcode(text,size,logo){
    var qrcode = $("#qrcodeCanvas").qrcode({
        render : "canvas", //設置渲染方式，有table和canvas，使用canvas方式渲染性能相對來說比較好
        text : text, //掃描二維碼后顯示的內容,可以直接填一個網(wǎng)址，掃描二維碼后自動跳向該鏈接
        width : size, //二維碼的寬度
        height : size, //二維碼的高度
        //correctLevel: QRErrorCorrectLevel.Q,//糾錯等級   
        background : "#ffffff", //二維碼的后景色
        foreground : "#000000", //二維碼的前景色
        src : logo//二維碼中間的圖片
    });
    
     //獲取網(wǎng)頁中的canvas對象 
    var mycanvas1=document.getElementsByTagName('canvas')[0]; 
    //將轉換后的img標簽插入到html中 
    var img = convertCanvasToImage(mycanvas1);
    $('#qrcodeCanvas').html(img);//imgDiv表示你要插入的容器id
}

//從 canvas 提取圖片 image 
function convertCanvasToImage(canvas) { 
    //新Image對象，可以理解為DOM 
    var image = new Image(); 
    // canvas.toDataURL 返回的是一串Base64編碼的URL，當然,瀏覽器自己肯定支持 
    // 指定格式 PNG 
    image.src = canvas.toDataURL("image/png"); 
    return image; 
} 

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

HTMLCanvasElement.toDataURL() 方法返回一個包含圖片展示的 data URI 。可以使用 type參數(shù)其類型，默認為 PNG 格式。圖片的分辨率為96dpi。

如果畫布的高度或寬度是0，那么會返回字符串“data:,”。
如果傳入的類型非“image/png”，但是返回的值以“data:image/png”開頭，那么該傳入的類型是不支持的。
Chrome支持“image/webp”類型。
語法
canvas.toDataURL(type, encoderOptions);
參數(shù)
type 可選
圖片格式，默認為 image/png
encoderOptions 可選
在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內選擇圖片的質量。如果超出取值范圍，將會使用默認值 0.92。其他參數(shù)會被忽略。
返回值
包含 data URI 的DOMString。

示例
有如下<canvas>元素

<canvas id="canvas" width="5" height="5"></canvas>
可以用這樣的方式獲取一個 data-URL

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
設置jpegs圖片的質量
var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
示例：動態(tài)更改圖片
可以使用鼠標事件來動態(tài)改變圖片（這個例子中改變圖片灰度）。

HTML
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />
JavaScript
window.addEventListener("load", removeColors);

function showColorImg() {
  this.style.display = "none";
  this.nextSibling.style.display = "inline";
}

function showGrayImg() {
  this.previousSibling.style.display = "inline";
  this.style.display = "none";
}

function removeColors() {
  var aImages = document.getElementsByClassName("grayscale"),
      nImgsLen = aImages.length,
      oCanvas = document.createElement("canvas"),
      oCtx = oCanvas.getContext("2d");
  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
    oColorImg = aImages[nImgId];
    nWidth = oColorImg.offsetWidth;
    nHeight = oColorImg.offsetHeight;
    oCanvas.width = nWidth;
    oCanvas.height = nHeight;
    oCtx.drawImage(oColorImg, 0, 0);
    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
    aPix = oImgData.data;
    nPixLen = aPix.length;
    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    }
    oCtx.putImageData(oImgData, 0, 0);
    oGrayImg = new Image();
    oGrayImg.src = oCanvas.toDataURL();
    oGrayImg.onmouseover = showColorImg;
    oColorImg.onmouseout = showGrayImg;
    oCtx.clearRect(0, 0, nWidth, nHeight);
    oColorImg.style.display = "none";
    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
  }
}

總結

以上是生活随笔為你收集整理的二维码转换格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。