關於在H5頁面的畫布上新增圖片的收穫

阿新 • • 發佈：2019-01-12

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	       version="1.1" width="100%" height="93%" viewBox="0 0 560 1000">
        
        <!-- 定義箭頭形狀 -->
        <defs>  
            <marker id="arrow"   
                markerUnits="strokeWidth"   
                markerWidth="12"   
                markerHeight="12"   
                viewBox="0 0 12 12"   
                refX="6"   
                refY="6"   
                orient="auto">  
                <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #000000;" />  
            </marker>
        </defs>  
        
         <!-- 對勾提示框 -->
        <g> 
            <image id="djhyImg" xlink:href="" x="44%" y="8%" height="15" width="15" >
            </image>
        </g>
        
        <!-- 按流程圖順序來寫 -->
        <rect id ="guzhangfasheng" class="unaccess" x="47%" y="1%" width="70" height="35"/>
        <text class="text" x="48.5%" y="3.5%">故障發生</text>
        <line class="line" x1="53%" y1="4.5%" x2="53%" y2="7%" marker-end="url(#arrow)"/>
        
        <rect id ="dingjihuiyi" class="unaccess" x="47%" y="7.5%" width="70" height="35" onclick="clickBox(2)"/>
        <text class="text" x="48.5%" y="10%" onclick="clickBox(2)">
                        定級會議
        </text>
        <g> 
            <image id="dingjihuiyiImg" xlink:href="" x="44%" y="9%" height="15" width="15" >
            </image>
        </g>

        <line x1="53%" y1="11%" x2="53%" y2="13%" class="disappear"/>
         <line x1="65%" y1="13%" x2="65%" y2="14.5%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="15%" y1="13%" x2="65%" y2="13%" class="disappear"/>
        <line id="yuan01" x1="63%" y1="13%" x2="90%" y2="13%" class="disappear"/>
        <line x1="15%" y1="13%" x2="15%" y2="14.5%" class="disappear" marker-end="url(#arrow)"/>
        <line id="yuan02" x1="90%" y1="13%" x2="90%" y2="14.5%" class="disappear" marker-end="url(#arrow)"/>
        <line id="yuan03" x1="90%" y1="18.5%" x2="90%" y2="71%" class="disappear"/>
 
        <rect id ="paichahui" class="disappear" x="10%" y="15%" width="70" height="35" onclick="clickBox(11)"/>
        <text class="disappear" x="12.5%" y="17%" onclick="clickBox(11)">排查會</text>
        <g> 
            <image id="paichahuiImg" xlink:href="" x="7%" y="16%" height="15" width="15" >
            </image>
        </g>

        <rect id ="tongbaohuiyi" class="disappear" x="58.5%" y="15%" width="70" height="35" onclick="clickBox(4)"/>
        <text class="disappear" x="60%" y="17%" onclick="clickBox(4)">通報會議</text>
        <g> 
            <image id="tongbaohuiyiImg" xlink:href="" x="55.5%" y="16%" height="15" width="15" >
            </image>
        </g>

        <rect id ="yingjiyuan" class="disappear" x="83%" y="15%" width="70" height="35" onclick="clickBox(3)"/>
        <text id ="yingjitext" class="disappear" x="83.5%" y="17%" style="font-size:8pt" onclick="clickBox(3)">執行應急預案</text>
        <g> 
            <image id="yingjiyuanImg" xlink:href="" x="80%" y="16%" height="15" width="15" >
            </image>
        </g>
 
        <line x1="15%" y1="18.5%" x2="15%" y2="20.5%" class="disappear"/>
        <line x1="15%" y1="20.5%" x2="5%" y2="20.5%" class="disappear"/>
        <line x1="15%" y1="20.5%" x2="25%" y2="20.5%" class="disappear"/>
        <line x1="5%" y1="20.5%" x2="5%" y2="23.5%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="25%" y1="20.5%" x2="25%" y2="23.5%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="65%" y1="18.5%" x2="65%" y2="21%" class="disappear" marker-end="url(#arrow)"/>
 
        <rect id ="ganwangxianchang" class="disappear" x="0%" y="24%" width="60" height="35" onclick="clickBox(12)"/>
        <text class="disappear" x="1%" y="26%" onclick="clickBox(12)">趕往現場</text>
         <g> 
            <image id="ganwangxianchangImg" xlink:href="" x="11%" y="25%" height="15" width="15" >
            </image>
        </g>
        
        <rect id ="vpn" class="disappear" x="19%" y="24%" width="60" height="35" onclick="clickBox(13)"/>
        <text class="disappear" x="22%" y="26%" onclick="clickBox(13)">Vpn</text>
        <g> 
            <image id="vpnImg" xlink:href="" x="30%" y="25%" height="15" width="15" >
            </image>
        </g>
        <rect id ="huibaoqingkuang" class="disappear" x="58.5%" y="21.5%" width="70" height="35" onclick="clickBox(5)"/>
        <text class="disappear" x="60%" y="23.5%" onclick="clickBox(5)">彙報情況</text>
        <g> 
            <image id="huibaoqingkuangImg" xlink:href="" x="55.5%" y="22.5%" height="15" width="15" >
            </image>
        </g>
        <line x1="65%" y1="25%" x2="65%" y2="27.5%" class="disappear" marker-end="url(#arrow)"/>
        <rect id ="kefuhuashu" class="disappear" x="58.5%" y="28%" width="70" height="35" onclick="clickBox(6)"/>
        <text class="disappear" x="60%" y="30%" onclick="clickBox(6)">客服話術</text>
        <g> 
            <image id="kefuhuashuImg" xlink:href="" x="55.5%" y="29%" height="15" width="15" >
            </image>
        </g>
        <line x1="5%" y1="27.5%" x2="5%" y2="30.5%" class="disappear"/>
        <line x1="25%" y1="27.5%" x2="25%" y2="30.5%" class="disappear"/>
        <line x1="5%" y1="30.5%" x2="25%" y2="30.5%" class="disappear"/>
        <line x1="15%" y1="30.5%" x2="15%" y2="34.5%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="65%" y1="31.5%" x2="65%" y2="34.5%" class="disappear" marker-end="url(#arrow)"/>
 
        <rect id ="yuanyinpaicha" class="disappear" x="9%" y="35%" width="60" height="380" onclick="clickBox(14)"/>
        <text class="disappear" x="9.5%" y="54%" onclick="clickBox(14)">原因排查</text>
         <g> 
            <image id="yuanyinpaichaImg" xlink:href="" x="6%" y="52.5%" height="15" width="15" >
            </image>
        </g>
        <rect id ="gaoguanqueren" class="disappear" x="58.5%" y="35%" width="70" height="35" onclick="clickBox(7)"/>
        <text class="disappear" x="59%" y="37%" style="font-size:8pt" onclick="clickBox(7)">高管確認話術</text>
         <g> 
            <image id="gaoguanquerenImg" xlink:href="" x="55.5%" y="36%" height="15" width="15" >
            </image>
        </g>
        <line x1="65%" y1="38.5%" x2="65%" y2="42.5%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="52%" y1="40.5%" x2="78%" y2="40.5%" class="disappear"/>
        <line x1="52%" y1="40.5%" x2="52%" y2="42.5%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="78%" y1="40.5%" x2="78%" y2="42.5%" class="disappear" marker-end="url(#arrow)"/>
 
        <rect id ="tongbaozhongxin" class="disappear" x="44.5%" y="43%" width="70" height="35" onclick="clickBox(8)"/>
        <text class="disappear" x="46%" y="45%" onclick="clickBox(8)">通報中心</text>
         <g> 
            <image id="tongbaozhongxinImg" xlink:href="" x="41.5%" y="44%" height="15" width="15" >
            </image>
        </g>
        <rect id ="tongbaochushi" class="disappear" x="58.5%" y="43%" width="70" height="35" onclick="clickBox(9)"/>
        <text class="disappear" x="60%" y="45%" onclick="clickBox(9)">通報處室</text>
         <g> 
            <image id="tongbaochushiImg" xlink:href="" x="57%" y="44%" height="15" width="15" >
            </image>
        </g>
        <rect id ="xiangguangongsi" class="disappear" x="72.5%" y="43%" width="70" height="35" onclick="clickBox(10)"/>
        <text class="disappear" x="74%" y="45%" onclick="clickBox(10)">相關公司</text>
         <g> 
            <image id="xiangguangongsiImg" xlink:href="" x="71%" y="44%" height="15" width="15" >
            </image>
        </g>
 
        <rect id ="fanganqueding" class="disappear" x="27%" y="38%" width="70" height="35" onclick="clickBox(15)"/>
        <text class="disappear" x="28.5%" y="40%" onclick="clickBox(15)">方案確定</text>
         <g> 
            <image id="fanganquedingImg" xlink:href="" x="24%" y="39%" height="15" width="15" >
            </image>
        </g>
        <rect id ="tijiaoshenpi" class="disappear" x="27%" y="49%" width="70" height="35" onclick="clickBox(16)"/>
        <text class="disappear" x="28.5%" y="51%" onclick="clickBox(16)">提交審批</text>
         <g> 
            <image id="tijiaoshenpiImg" xlink:href="" x="24%" y="50%" height="15" width="15" >
            </image>
        </g>
        <rect id ="juecerenpi" class="disappear" x="47%" y="55%" width="72" height="35" onclick="clickBox(17)"/>
        <text class="disappear" x="47.5%" y="57%" onclick="clickBox(17)">決策人批准</text>
         <g> 
            <image id="juecerenpiImg" xlink:href="" x="44%" y="56%" height="15" width="15" >
            </image>
        </g>
        <rect id ="zhixingfangan" class="disappear" x="27%" y="62%" width="70" height="35" onclick="clickBox(18)"/>
        <text class="disappear" x="27.5%" y="64%" style="font-size:8pt" onclick="clickBox(18)">執行解決方案</text>
         <g> 
            <image id="zhixingfanganImg" xlink:href="" x="24%" y="63%" height="15" width="15" >
            </image>
        </g>
        <line x1="20%" y1="53.5%" x2="23%" y2="53.5%" class="disappear"/>
        <line x1="23%" y1="53.5%" x2="23%" y2="36%" class="disappear"/>
        <line x1="23%" y1="36%" x2="33%" y2="36%" class="disappear"/>
        <line x1="33%" y1="36%" x2="33%" y2="37.5%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="33%" y1="41.5%" x2="33%" y2="48.5%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="33%" y1="52.5%" x2="33%" y2="53.5%" class="disappear"/>
        <line x1="33%" y1="53.5%" x2="53%" y2="53.5%" class="disappear"/>
        <line x1="53%" y1="53.5%" x2="53%" y2="54.5%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="53%" y1="58.5%" x2="53%" y2="64%" class="disappear"/>
        <line x1="53%" y1="64%" x2="40.5%" y2="64%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="33%" y1="65.5%" x2="33%" y2="68.5%" class="disappear" marker-end="url(#arrow)"/>
 
        <rect id ="querenhuifu" class="disappear" x="27%" y="69%" width="70" height="35" onclick="clickBox(19)"/>
        <text class="disappear" x="28.5%" y="71%" onclick="clickBox(19)">確認恢復</text>
        <g> 
            <image id="querenhuifuImg" xlink:href="" x="24%" y="70%" height="15" width="15" >
            </image>
        </g>
        <line id="yuan04" x1="90%" y1="71%" x2="40.5%" y2="71%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="33%" y1="72.5%" x2="33%" y2="76%" class="disappear"/>
        <line x1="33%" y1="76%" x2="53%" y2="76%" class="disappear"/>
        <line x1="53%" y1="76%" x2="53%" y2="77%" class="disappear" marker-end="url(#arrow)"/>
 
        <rect id ="huibao" class="disappear" x="47%" y="77.5%" width="70" height="35" onclick="clickBox(20)"/>
        <text class="disappear" x="50.5%" y="79.7%" onclick="clickBox(20)">彙報</text>
         <g> 
            <image id="huibaoImg" xlink:href="" x="44%" y="78.5%" height="15" width="15" >
            </image>
        </g>
        <line x1="53%" y1="81%" x2="53%" y2="86%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="39%" y1="83.5%" x2="69%" y2="83.5%" class="disappear"/>
        <line x1="39%" y1="83.5%" x2="39%" y2="86%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="69%" y1="83.5%" x2="69%" y2="86%" class="disappear" marker-end="url(#arrow)"/>
 
        <rect id ="tongbaozhongxin2" class="disappear" x="32.5%" y="86.5%" width="70" height="35" onclick="clickBox(21)"/>
        <text class="disappear" x="34%" y="88.5%" onclick="clickBox(21)">通報中心</text>
         <g> 
            <image id="tongbaozhongxin2Img" xlink:href="" x="29.5%" y="87.5%" height="15" width="15" >
            </image>
        </g>
        <rect id ="tongbaochushi2" class="disappear" x="47%" y="86.5%" width="70" height="35" onclick="clickBox(22)"/>
        <text class="disappear" x="48.5%" y="88.5%" onclick="clickBox(22)">通報處室</text>
         <g> 
            <image id="tongbaochushi2Img" xlink:href="" x="45%" y="87.5%" height="15" width="15" >
            </image>
        </g>
        <rect id ="xiangguangongsi2" class="disappear" x="61.5%" y="86.5%" width="70" height="35" onclick="clickBox(23)"/>
        <text class="disappear" x="63%" y="88.5%" onclick="clickBox(23)">相關公司</text>
        <g> 
            <image id="xiangguangongsi2Img" xlink:href="" x="60%" y="87.5%" height="15" width="15" >
            </image>
        </g>
        <line x1="39%" y1="90%" x2="39%" y2="92.5%" class="disappear"/>
        <line x1="53%" y1="90%" x2="53%" y2="95%" class="disappear" marker-end="url(#arrow)"/>
        <line x1="69%" y1="90%" x2="69%" y2="92.5%" class="disappear"/>
        <line x1="39%" y1="92.5%" x2="69%" y2="92.5%" class="disappear"/>
  
        <rect id ="jieshu" class="disappear" x="47%" y="95.5%" width="70" height="35"/>
        <text class="disappear" x="50.5%" y="97.5%">結束</text>
        
    </svg>

關於在H5頁面的畫布上新增圖片的收穫

H5 移動端上傳圖片和視訊頁面顯示縮圖

這是我第一次寫部落格，想要分享一下程式設計經驗，因為我也算是一個菜鳥而已，在程式設計過程中，很多問題都是通過百度，通過CSDN裡面的各位大神分享的經驗，才得以解決的，所以我也是本著造福他人，也完善自己的意願，開始寫寫部落格，分享一下程式設計中遇到的問題及解決方法。好，廢話不

安卓自定義：Toast 以及Toast的出場動畫以及Toast上新增圖片以及點選事件

安卓自定義Toast： 1.自定義一個類：CustomToast 繼承自：Toast 2.在CustomToast類中新增一個靜態 mCustomToast 物件 private static CustomToast mCustomToast; 3.在CustomToast類中新

在二維碼上新增圖片主題（支援連結跳轉）

（1） MatrixToImageWriter二維碼建立核心類 package com.yx.yzh.utils; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import

webview支援H5開啟並上傳圖片

mWebView.setWebChromeClient(new WebChromeClient() { // For Android 5.0+ @Override public boolean onSho

H5頁面長按儲存圖片的功能

1.使用CSS屬性 -webkit-touch-callout:default; 可以編輯使改元素長按可儲存，但是注意著只是寫入了草案的一個屬性。但是在實際使用中並沒有發現問題 2. 在需要對元素垂直居中的時候可以使用 position:absolute; top:

在tabbar 上新增圖片、紅點

在tabbar上新增圖片程式碼CGRect frame = CGRectMake(0, 0, 320, 49); UIView *v = [[UIView alloc] initWithFrame:frame]; UIImage *img = [UIImag

Android開發筆記（一百五十二）H5通過WebView上傳圖片

上一篇文章介紹了WebView與JS之間的資料互動，其實就是把字串傳來傳去，這對文字格式的資訊傳輸來說倒還湊合，倘若要傳輸圖片資訊就不管用了。所以，要想讓h5網頁支援從手機上傳圖片，還得另外想辦法，當然各版本的Android系統也都提供了相應的解決辦法。在Android 4.

iOS 載入H5頁面的時候新增一個菊花

我們常常載入H5的時候，網路延時的時候會出現空白，或者用進度條現實載入。產品狗就覺得不好看。非要載入一個菊花。 1. 在viewDidLoad 方法裡面加一個 [self showProgress:!"載入中。。。"]; 2.等載入

基於VUE選擇上傳圖片並在頁面顯示（圖片可刪除）

.ajax sta http data .cn 數據 file prim 生成 demo例子：依賴文件： http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本內容：

h5頁面微信分享文字鏈接加圖片

function 瀏覽器 title 朋友圖片最近在做微信公眾號，在設計一些html5頁面時，通過微信內置瀏覽器訪問頁面分享後，希望可以自定義小圖標（imgUrl）和分享鏈接（lineLink），下面下微信內置瀏覽器分享功能的JS代碼，希望對大家有所幫助。 var imgU

angular +H5 上傳圖片與預覽圖片

scrip reader tex load .sh upd http upload wim //index.html <form class="form-horizontal"> <div class="panel panel-default"&g

上傳圖片在頁面上顯示

doc this o-c post ring asc sof ros 顯示看了別人寫的自己照著寫了一下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%

微信H5鬥地主平臺制作在Canvas畫布上畫文本的

canvas微信H5鬥地主平臺制作Q：2172243813必不可少的條件（h5.ttkmwl.com）在Canvas畫布上畫文本的var Labels = Class.create();$.extend(Labels.prototype, { initialize: function (cxt) {

移動端通過ajax上傳圖片（文件）並在前臺展示——通過H5的FormData對象

com 地址 ces 文件只需要 capture val data als 前些時候遇到移動端需要上傳圖片和視頻的問題，之前一直通過ajax異步的提交數據，所以在尋找通過ajax上傳文件的方法。發現了H5裏新增了一個FormData對象，通過這個對象可以直接綁定html中

Python爬蟲--抓取單一頁面上的圖片文件學習

python 爬蟲 #！/usr/bin/python import sys #正則表達式庫 import re import urllib def getHtml(url): page = urllib.urlopen(url) html = page.read() ret

將H5頁面轉化為圖片

head true pos ref -o 如果 data pad tor 使用html2canvas插件，詳情：http://html2canvas.hertzen.com/ 實例代碼： html <div id="capture" style="padding:

H5上傳圖片之canvas

request foo lis idt rap subst splay rim src H5上傳圖片之canvas，使用canvas處理壓縮圖片再上傳 html代碼： <form action="" method="post"> <dl&

上傳圖片至數據庫及從數據庫中讀取圖片顯示至頁面

for循環 common 基於 serial 文件創建每一個 super lis size 1.基於最簡單的servlet+jsp+jdbc實現 2.實驗環境：myeclipse以及tomcat 8.5 3.所需jar包：　　 4.數據庫：　　數據庫用的是mysql

php使用curl新增微信臨時素材(上傳圖片)

() command ltrim apps 地址 ken define image post <?php$APPID=‘‘; $APPSECRET=‘‘; $info=json_decode(file_get_contents("https://api.wei

關於在H5頁面的畫布上新增圖片的收穫

相關推薦