1. 程式人生 > >使用 html2canvas 將 HTML 節點轉為圖片並解決跨域圖片

使用 html2canvas 將 HTML 節點轉為圖片並解決跨域圖片

<script src="/js/html2canvas/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    //將圖片轉為 base64
    function getBase64Image(img) {
        img.crossOrigin = 'Anonymous';
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var
ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = canvas.toDataURL("image/jpeg"); return dataURL; } //遞迴將要轉換的節點中的所有圖片的src全部轉為base64 var s = 0; image2base64(s); function
image2base64() {
var image = new Image(); image.src = $(".share_b img").eq(s).attr('src'); console.log(image.src); image.onload = function() { var base64 = getBase64Image(image); $(".share_b img").eq(s).attr('src', base64); s++; if
(s < $(".share_b img").length) { image2base64(); } } } //使用html2canvas將節點轉為圖片 $(function(){ $(".share_a").bind("click", function () { html2canvas($(".share_b")).then(function(canvas) { var imgUria = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 獲取生成的圖片的url $(".share_img").attr('src', imgUria); $(".share_img").css('display', 'block'); $(".share_bg").css('display', 'block'); }); }) });
</script>

以上。

相關推薦

使用 html2canvas HTML 節點轉為圖片解決圖片

<script src="/js/html2canvas/html2canvas.min.js" type="text/javascript" charset="utf-8"></

html2canvas html程式碼轉為圖片

轉換程式碼到圖片使用 html2canvas,這是一個非常著名的從瀏覽器網頁截圖的開源庫,使用很方便,功能也很強大。 使用 html2canvas         html2canvas 的使用非常簡單,簡單到只需要傳入一個 DOM 元素,然後通過回撥拿到 canvas: 在實際使用的時候,有兩個

怎麽png格式轉為jpg壓縮圖片

都是 圖片壓縮 分享 process 圖片格式轉換 遇到 圖片 mark cto Jpg和Png都是我們經常會使用到的圖片格式,但是使用最多的還是jpg格式,平時在上傳圖片的時候,或許會遇到圖片太大無法上傳的問題,那怎麽將png格式轉為jpg並壓縮圖片呢?1、首先壓縮圖片需

C/C++十進位制數轉為二進位制輸出

標頭檔案用了C++的,也可以加上#include <stdio.h>,可以用C語言的輸入輸出語句。#include<iostream>//將十進位制轉為二進位制,並輸出其中1的個數。 usingnamespace std;int main(){int

Java中使用phantomjsHTML頁面轉為pdf

之前有個需求,將頁面轉為pdf,當時使用itext轉換,但是呢樣式與實際在瀏覽器中開啟的樣式存在差異。比如選擇項長得不一樣,CheckBox長得不一樣,這就不行,需求要跟瀏覽器開啟一模一樣,後經過多方面查詢,終於找到一個靠譜點的解決方案:使用phantomjs外掛。 首先下

(攝像頭視訊處理)ROS節點轉為opencv 影象----cv_bridge 順便顯示兩個相機

#include <ros/ros.h> #include<image_transport/image_transport.h> #include<cv_bridge/cv_bridge.h> #include<sens

使用com.aspose.wordsword模板轉為PDF亂碼解決方案(window下正常)

     最近在做產品大成小管(大成小管),使用com.aspose.words將word模板轉為PDF檔案時,在開發平臺window下轉換沒有問題,中文也不會出現亂碼。但是將服務部署在正式伺服器(linux)上,轉換出來的PDF中文就出現了亂碼。在網上找了很久,才找到原因

Java gson使用 Java物件轉為Json Json轉回Java物件

簡述: testJson_1中 將不同的java物件轉換為json格式檔案(String),  testJson_2中傳入testJson_1中生成的JSON String 引數,反向返回各種Java的物件 包括:java的String、List、HashMap、Java

canvas圖片報Tainted canvases may not be exported.解決辦法

color ctx 浪費 spa width port use 原因 gettime 我們做微信活動,經常會碰到生成圖片進行分享的需求。生成的圖片中肯定包含微信頭像,這時就會碰到canvas轉圖片時的跨域問題。 一開始我是把微信頭像下載到服務器上來避開跨域問題的,但這樣做太

圖片使用toDataURL遇坑記。(最終還是解決了)

    這兩天接到一個需求,需要做一個圖片裁剪功能。找到了cropper.js,使用起來算是順手,在做到將截好的圖片以base64的形式上傳儲存的時候,突然遇到了一個之前沒有碰到過的問題,沒錯就是:圖片跨域問題。     網上搜鎖了一下跨域圖片使用toDat

pytorch讀取圖片按比例改變圖片的大小或者是固定大小

簡述 Scale是做比例放縮 CenterCrop是切割 程式碼 from PIL import Image import torchvision.transforms as transforms import matplotlib.pyplot as p

網路圖片轉換為base64,解決問題

function convertImgToBase64(url, callback, outputFormat) { var canvas = document.createElement('CANVAS'), ctx = canvas.getContext(

SpringBoot2.0填坑(一):使用CROS解決解決swagger 訪問不了問題

簡介 公司後臺是採用SpringBoot2.0 搭建的微服務架構,前端框架用的是vue 使用前後端分離的開發方式,在開發聯調的時候需要進行跨域訪問,那麼使用CROS解決了跨域問題,但是swagger 卻用不了 具體解決方案請繼續往下看… CROS跨域原理 跨域資源共享(CORS)

利用ueditor富文字編輯器上傳圖片解決問題

          百度ueditor富文字編輯器單張圖片上傳有固有缺陷,那就是不支援跨域配置,下圖是UEditor官網說明。        但是我們在實際開發中,前後臺分離,跨域上傳圖片是很平常的,那麼怎麼解決跨域問題呢?答案是通過nginx配置域名來解決。      

利用 Javascript 實現上傳圖片向伺服器獲取圖片路徑後顯示的 demo

       由於某些特殊原因,有時需要從服務端請求到圖片路徑,需要給該介面傳遞對應圖片的base64 dataURL,並且有時需要將其上傳圖片的型別統一為 jpeg 格式時,可採用以下方式。 HTM

Umeditor結合Spring Restful解決圖片上傳問題

專案中編輯器採用了Umeditor,但是由於跨域的問題,上傳圖片不能正常使用,本文解決了Spring應用的跨域問題,Spring的專案均可以參考。 專案背景 (任何不談背景的解決方案都是耍流) Umeditor+spring mvc restful,前

從資料庫中讀取一個圖片儲存為一個圖片檔案

import java.sql.*; import java.io.*; public class WriteDB {  public static void main(String[] args)  {   Connection conn=null;   String dr

gridview顯示圖片實現點選圖片放大縮小

一、建立一個gridview控制元件,並新增列。 其中ImageField就是顯示圖片的列,屬性DataImagteUrlField繫結為圖片的路徑,也就是資料庫儲存圖片路徑的欄位名。 二、建立一個用來顯示大圖片的div 以及Img控制元件。以及css樣式、js。

python按照比例縮小圖片生成新的圖片

import os from PIL import Image ext = ['jpg','jpeg','png'] files = os.listdir('.') def process_image(filename, mwidth=200, mheight=400):

Asp.net Web Api 解決問題

asp oss ros ner div exec space out color using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syst