2. 程式人生 > >img標籤src屬性沒變，改變起引用的圖片，重新整理頁面仍然顯示之前的圖片

img標籤src屬性沒變，改變起引用的圖片，重新整理頁面仍然顯示之前的圖片

阿新 • • 發佈：2019-02-16
var chooseGallery; var chooseCamera; var cropImage; var imgData; var clipContent; var clipAction; var showContent; var showImg; var targetImg; var targetImgCamera; initPage(); function
initPage() { initParams(); initListeners(); initImgClip(); } function initParams() { targetImg = document.querySelector('#targetImg'); targetImgCamera = document.querySelector('#targetImgCamera'
); chooseGallery = document.querySelector('.choose-gallery'); chooseCamera = document.querySelector('.choose-camera'); clipContent = document.querySelector('.clip-content'); clipAction = document.querySelector('.clip-action'); showContent = document.querySelector('.show-content'
); showImg = document.querySelector('.show-img'); } function initImgClip() { new FileInput({ container: '#targetImg', isMulti: false, type: 'Image_Camera', success: function(b64, file, detail) { // console.log("選擇:" + b64); console.log("fileName:" + file.name); loadImg(b64); }, error: function(error) { console.error(error); } }); new FileInput({ container: '#targetImgCamera', isMulti: false, type: 'Camera', success: function(b64, file, detail) { // console.log("選擇:" + b64); console.log("fileName:" + file.name); loadImg(b64); }, error: function(error) { console.error(error); } }); } function loadImg(b64) { changeImgClipShow(true); var img = new Image(); img.src = b64; img.onload = function() { EXIF.getData(img, function() { var orientation = EXIF.getTag(this, 'Orientation'); cropImage && cropImage.destroy(); cropImage = new ImageClip({ container: '.img-clip', img, // 0代表按下才顯示，1恆顯示，-1不顯示 sizeTipsStyle: 0, // 為1一般是螢幕畫素x2這個寬高 // 最終的大小為：螢幕畫素*螢幕畫素比（手機中一般為2）*compressScaleRatio compressScaleRatio: 1.1, // iphone中是否繼續放大：x*iphoneFixedRatio // 最好compressScaleRatio*iphoneFixedRatio不要超過2 iphoneFixedRatio: 1.8, // 減去頂部間距，底部bar,以及顯示間距 maxCssHeight: window.innerHeight - 100 - 50 - 20, // 放大鏡捕獲的影象半徑 captureRadius: 30, // 是否採用原影象素（不會壓縮） isUseOriginSize: false, // 增加最大寬度，增加後最大不會超過這個寬度 maxWidth: 0, // 是否固定框高，優先順序最大，設定後其餘所有係數都無用直接使用這個固定的寬，高度自適應 forceWidth: 0, // 同上，但是一般不建議設定，因為很可能會改變寬高比導致拉昇，特殊場景下使用 forceHeight: 0, // 壓縮質量 quality: 0.92, mime: 'image/jpeg', }); // 6代表圖片需要順時針修復（預設逆時針處理了，所以需要順過來修復） switch (orientation) { case 6: cropImage.rotate(true); break; default: break; } }); }; } function resizeShowImg(b64) { var img = new Image(); img.src = b64; img.onload = showImgOnload; } function showImgOnload() { // 必須用一個新的圖片載入，否則如果只用showImg的話永遠都是第1張 // margin的話由於有樣式，所以自動控制了 var width = this.width; var height = this.height; var wPerH = width / height; var MAX_WIDTH = Math.min(window.innerWidth, width); var MAX_HEIGHT = Math.min(window.innerHeight - 50 - 100, height); var legalWidth = MAX_WIDTH; var legalHeight = legalWidth / wPerH; if (MAX_WIDTH && legalWidth > MAX_WIDTH) { legalWidth = MAX_WIDTH; legalHeight = legalWidth / wPerH; } if (MAX_HEIGHT && legalHeight > MAX_HEIGHT) { legalHeight = MAX_HEIGHT; legalWidth = legalHeight * wPerH; } var marginTop = (window.innerHeight - 50 - legalHeight) / 2; showImg.style.marginTop = marginTop + 'px'; showImg.style.width = legalWidth + 'px'; showImg.style.height = legalHeight + 'px'; } function changeImgClipShow(isClip) { if (isClip) { chooseGallery.classList.add('hidden'); chooseCamera.classList.add('hidden'); clipAction.classList.remove('hidden'); } else { chooseGallery.classList.remove('hidden'); chooseCamera.classList.remove('hidden'); clipAction.classList.add('hidden'); // 需要改變input，否則下一次無法change targetImg.value = ''; targetImgCamera.value = ''; } } function initListeners() { document.querySelector('#btn-reload').addEventListener('click', function() { cropImage && cropImage.destroy(); changeImgClipShow(false); }); document.querySelector('#btn-back').addEventListener('click', function() { changeContent(false); }); document.querySelector('#btn-save').addEventListener('click', function() { // downloadFile(imgData); upload(function() { document.getElementById("picForm").submit(); tips('上傳成功'); }); }); document.querySelector('#btn-detail').addEventListener('click', function() { showImgDataLen(imgData); }); document.querySelector('#btn-maxrect').addEventListener('click', function() { if (!cropImage) { tips('請選擇圖片'); return; } cropImage.resetClipRect(); }); document.querySelector('#btn-rotate-anticlockwise').addEventListener('click', function() { if (!cropImage) { tips('請選擇圖片'); return; } cropImage.rotate(false); }); document.querySelector('#btn-rotate-clockwise').addEventListener('click', function() { if (!cropImage) { tips('請選擇圖片'); return; } cropImage.rotate(true); }); document.querySelector('#btn-verify').addEventListener('click', function() { if (!cropImage) { tips('請選擇圖片'); return; } var isConfirm = confirm("是否裁剪圖片並處理？"); if (isConfirm) { cropImage.clip(false); imgData = cropImage.getClipImgData(); recognizeImg(function() { changeContent(true); }, function(error) { tips(JSON.stringify(error), true); }); } }); } function showImgDataLen(imgData) { var len = imgData.length; var sizeStr = len + 'B'; if (len > 1024 * 1024) { sizeStr = (Math.round(len / (1024 * 1024))).toString() + 'MB'; } else if (len > 1024) { sizeStr = (Math.round(len / 1024)).toString() + 'KB'; } tips('處理後大小：' + sizeStr); } function tips(msg, isAlert) { if (isAlert) { alert(msg); } else { toast(msg); } } function toast(message) { var CLASS_ACTIVE = 'mui-active'; var duration = 2000; var toastDiv = document.createElement('div'); toastDiv.classList.add('mui-toast-container'); toastDiv.innerHTML = `<div class="mui-toast-message">${message}</div>`; toastDiv.addEventListener('webkitTransitionEnd', () => { if (!toastDiv.classList.contains(CLASS_ACTIVE)) { toastDiv.parentNode.removeChild(toastDiv); toastDiv = null; } }); // 點選則自動消失 toastDiv.addEventListener('click', () => { toastDiv.parentNode.removeChild(toastDiv); toastDiv = null; }); document.body.appendChild(toastDiv); toastDiv.classList.add(CLASS_ACTIVE); setTimeout(function() { toastDiv && toastDiv.classList.remove(CLASS_ACTIVE); }, duration); } function changeContent(isShowContent) { if (isShowContent) { showContent.classList.remove('hidden'); clipContent.classList.add('hidden'); resizeShowImg(imgData); showImg.src = imgData; } else { showContent.classList.add('hidden'); clipContent.classList.remove('hidden'); } } function b64ToBlob(urlData) { var arr = urlData.split(','); var mime = arr[0].match(/:(.*?);/)[1] || 'image/png'; // 去掉url的頭，並轉化為byte var bytes = window.atob(arr[1]); // 處理異常,將ascii碼小於0的轉換為大於0 var ab = new ArrayBuffer(bytes.length); // 生成檢視（直接針對記憶體）：8位無符號整數，長度1個位元組 var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob([ab], { type: mime }); } function downloadFile(content) { // Convert image to 'octet-stream' (Just a download, really) var imageObj = content.replace("image/jpeg", "image/octet-stream"); window.location.href = imageObj; } function recognizeImg(success, error) { // 裡面正常有：裁邊，擺正，梯形矯正，銳化等演算法操作 success(); } function upload(success, error) { success(); }

相關推薦

img標籤src屬性沒變，改變起引用的圖片，重新整理頁面仍然顯示之前的圖片

var chooseGallery; var chooseCamera; var cropImage; var imgData; var clipContent;

img標籤src路徑不變，讀取不同圖片時，圖片不重新整理甚至不顯示

問題描述： 1. Linux作業系統，weblogic伺服器下部署應用，IE9瀏覽器從伺服器取圖片顯示，相同src ，但圖片不同，第一次讀圖片，能夠顯示。當後一張圖片覆蓋前一張圖片後，再次讀取圖片，會

DOM實現獲取img標籤src屬性的絕對位置和相對位置

獲取相對路徑 顯示圖片的相對當前的文件所處的位置。 document.getElementById(obj).getAttribute('src')   獲取絕對路徑 顯示是圖片的完整路徑，即在伺服器的哪個資料夾下和檔案命名。 document.getEl

C#將圖片位元組流轉為Base64直接放入html的img標籤src屬性中

原地址：http://www.cnblogs.com/RedSky/p/5786703.html點選開啟連結 1,圖片要轉為byte[], 2,注意加上“data:image/jpeg;base64,”，這裡jpeg可以換成其他。 string html = "&

JAVA-正則提取img標籤src屬性中請求協議、域名、圖片字尾

正則表示式:src=(\"|'| |)([\\S]{1,}?|[/]{1,})([/]{1,})(.+?)([/]{1,})(.+?)\\.(png|jpg|jpeg)(\"|'| |/>) 示例程式碼： Pattern pattern = Pattern.com

IE 瀏覽器embed標籤src屬性為空，不能開啟網頁

前言：今天看到網站在IE上不停的轉圈圈（頁面基本顯示出來了），當時所有的JS都失效了，本著本職工作責任心，開始了找bug之路，但是過程比想象中要艱辛，一開始以為是base標籤有問題導致JS載入不到，後來認為是js衝突導致所有js執行失敗（又替換了順序，又替換了好多個JS版本），最

img標籤src引用網路圖片，頁面不顯示，返回403錯誤，網路圖片地址在瀏覽器能載入，放html卻不能顯示

在html頁面加入<meta name="referrer" content="no-referrer">標籤，就可以解決頁面載入網路圖片的問題，原因大概是網路安全的問題，別人的頁面做了安全防護的問題。<head> <meta chars

【開發和生產url替換問題】【script標籤】【img標籤src不存在時，在移動端會顯示一個小方格】

1.實際開發中，總是存在一些url或者一些其他變數在提交生產時要修改成生產的url地址或一些變數的變化，這時可以單獨建立一個js檔案，儲存一個全域性的物件，裡面儲存相應的開發配置，在生產時直接修改這個檔案就可以了。 // dev var url = {

HTML中在img使得src屬性為php程式（可為JPgraph所產生的影象）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> functio

Vue中動態繫結img的src屬性

問題：不同的status值，載入不同的圖片，如下程式碼雖然動態綁定了src，但是並不能成功載入圖片 <div> <img :src="imgUrl"/> <p>{{info}}</p> </div> computed:

Vue中img的src屬性繫結

<img src="./img/red.png'" />      // 頁面顯示圖片 如果遇到圖片是動態的，也就是說在不同情況下顯示不同的圖片，也就是下面使用的屬性繫結 <img :src="imgPath" />      // imgPath

Vue中img的src屬性繫結與static資料夾

不少人在vue的開發中遇到這樣一個問題： img的src屬性繫結url變數，然而圖片載入失敗。 大部分的情況中，是開發者使用了錯誤的寫法，例如： <img src="{{ imgUrl }}"/> 這樣寫肯定是不對的，正確的寫法應該使用v-

正則表示式替換img標籤src值

 package com.test; import java.util.HashSet; import java.util.Set; import java.util.regex.Ma

HTML中img標籤src路徑的值需要設定成一個變數來表示

在Java開發中，有時候會遇到在顯示圖片時不需要給圖片的src路徑設定成固定的，而是需要寫入從後臺資料庫傳入的路徑變數，下面給出瞭解決此問題的方法。<script> var pictureUrl = data.url;//後臺傳入的圖片路徑，url指的是資料

【Vue】vue中img的src屬性繫結問題

問題：img的src屬性填寫的圖片地址，可以正常渲染，但是一旦利用繫結:src屬性的時候，圖片就載入失敗了 需求：滑鼠移入切換圖片 上一位前端小哥哥，沒做這個互動，我接手後加上去，很簡答的互動，我替換圖片的時候準備三元判斷，src需要屬性繫結，於是發現同樣的地

js 正則表示式 獲得img 的src屬性

<html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>Untitled Page</title> <script language="javascr

微信小程式 --- 從A頁面傳參到B頁面設定web-view標籤src屬性傳參異常處理方法

一般情況頁面跳轉引數都是以下幾種姿勢 引數傳遞過去接收的處理方法，可以看我的另一篇博文，點選這裡跳轉 第一種: let parameter = 1; wx.navigateTo({ url: '/page/a/a?paramet

pandas 列索引轉換，透視，保留小數點兩位，改變列的順序，改變型別，存檔案，資料庫讀寫

import time from datetime import datetime from sqlalchemy import create_engine, Column ,Integer,DateTime,DECIMAL import pandas as pd answerengine=cr

React Native：自定義一個導航欄，改變狀態列背景，隱藏狀態列

設計開發過程中，導航欄都會有所不同，這時候使用RN就需要自定義一個想要的導航欄了，RN中文網有講專門ios的導航欄（NavigatorIOS），可以不用自定義。 首先定義自定義導航欄的一些屬性的約束，記得npm install --save prop-types然後引入import Prop

Recat Native：自定義一個導航欄，改變狀態列背景，隱藏狀態列

設計開發過程中，導航欄都會有所不同，這時候使用RN就需要自定義一個想要的導航欄了，RN中文網有講專門ios的導航欄（NavigatorIOS），可以不用自定義。 首先定義自定義導航欄的一些屬性的約束，記得npm install --save prop-types然後引入im