<!-- 生成二維碼 -->
<!-- https://mvnrepository.com/artifact/com.google.zxing/javase -->
<dependency>
<groupId>com.google.zxing</groupId>
<artifactId>javase</artifactId>
<version>3.4.0</version>
</dependency>
果你是配色小白,那么這篇文章真的對你超級有用!當然了,如果你對顏色的搭配有點研究的話,這篇文章也是對你會有不少幫助的!
這里直接分享四個超級好用的在線色彩搭配網站,每一個都是提高你工作效率的絕對利器!
這個網站簡直太好用了!其中有著超級強大的顏色搜索功能,這是區別其他設計網站的一個很好用的特色!網站的頁面也很有設計性,同時也做到了簡約干凈:
這里我們看一下這個顏色搜索功能,在網站的右側會有一個調色板,我們只需要在這里替換成你需要的顏色搭配,那么就能檢索以這種配色為主的所有靈感設計參考了:
比如我們選擇這幾種顏色,然后網站就會根據我們選擇的配色,給你生成一些參考:
除了根據色彩搭配來篩選,我們還可以點進任意一個設計作品,詳細頁面也會有一個簡單的色環和色卡,這個時候我們就可以使用PPT中的取色器進行取色了:
如果我們還需要這種色環的配色,還可以點擊這里的小色環,還能繼續得到類似的配色參考:
這個網站簡單的來說是一個可以提取網頁配色的神器!如果你瀏覽到一個很有設計感的網站,想要復制別人的配色,這時候該怎么辦呢?所以,這里就介紹一款網頁色彩提取工具:
你只需要在這個網站的左上角輸入欄中添加想要提取顏色的網址,預設情況下會從HTML和CSS樣式表單獲取顏色搭配:
然后你可以從提取的顏色中看到顏色的具體數值,包括顏色的預覽、色碼等信息:
當然了,當你切換成程序代碼的模式后,這些顏色的CSS代碼也會標注出來:
要是想保持網站的配色信息,直接點擊網站右上角的Generate即可:
這個網站相信很多人都知道吧?如果不知道的話,在這里我也簡單介紹一下,這是Adobe官方推出的一個配色網站:
當我們在做設計的時候,如果想做一些漸變色的設計,這個網站真的超級好用!在中間的色款中輸入色值,然后網站會自動生成顏色搭配,
然后這些顏色做成漸變后,效果相當不錯:
要是你覺得顏色跨度不夠大,還可以手動拖拽色輪上的控點進行調整,漸變色依舊能做的很出彩:
不僅僅是生成鄰近色,你在網站的左側選擇不同的套用顏色調和規則,中間的色輪會自動生成不同的配色方案!
比如你選擇單色,這時候的色卡中的顏色就以單色為規則進行搭配。直接保存頁面右上角的色卡就能進行取色:
還有三元群、輔色、分割輔色等等:
這個網站是在太強大了,而且網頁的設計十分的簡潔干凈,而且每一組的配色都超級經典好看!
你只需要打開這個網站,在頁面通過空格鍵隨機生成色卡,每一組的配色都相當不錯:
圖源網絡
而且這里還會給很詳細的顏色信息,包括顏色的名稱、色調、色溫、配色建議、色彩和諧度等等!最重要的這個網站出了app版本,大家可以嘗試在手機上下載對應的app進行配色的參考:
這四個網站看完后,是不是覺得很實用呢?
這些配色網站網址鏈接我給你整理好了,關注我+回復(關鍵詞:配色網站)就可獲取!
#ppt# #職場達人煉成記# #神器#
者 | 帶妳心菲
來源 | urlify.cn/emE3ya
我們使用兩種方式,去生成二維碼,但是其實,二維碼的生成基礎,都是zxing包,這是Google開源的一個包,第一種是使用原始的zxing方式去實現,第二種是使用hutool來實現,hutool其實也是對于zxing的一個封裝,但是封裝前后,確實比較簡單了。
<!-- zxing生成二維碼 -->
<dependency>
<groupId>com.google.zxing</groupId>
<artifactId>core</artifactId>
<version>3.3.3</version>
</dependency>
<dependency>
<groupId>com.google.zxing</groupId>
<artifactId>javase</artifactId>
<version>3.3.3</version>
</dependency>
下面是把生成二維碼的方法,封裝到了QRCodeUtil的類之中,這個方法看起來還是比較多的,但是也談不上太復雜,主要是對于BufferedImage生成圖片,然后就是ImageIO.write()方法,write的位置,可以是普通的磁盤文件,也可以是web的流,我們使用web流的時候,就需要添加com.google.zxing-javase的依賴。
@Component
@Slf4j
public class QRCodeUtil {
/**
* CODE_WIDTH:二維碼寬度,單位像素
* CODE_HEIGHT:二維碼高度,單位像素
* FRONT_COLOR:二維碼前景色,0x000000 表示黑色
* BACKGROUND_COLOR:二維碼背景色,0xFFFFFF 表示白色
* 演示用 16 進制表示,和前端頁面 CSS 的取色是一樣的,注意前后景顏色應該對比明顯,如常見的黑白
*/
private static final int CODE_WIDTH = 400;
private static final int CODE_HEIGHT = 400;
private static final int FRONT_COLOR = 0x000000;
private static final int BACKGROUND_COLOR = 0xFFFFFF;
/**
* @param codeContent 二維碼參數內容,如果是一個網頁地址,如 https://www.baidu.com/ 則 微信掃一掃會直接進入此地址, 如果是一些參數,如
* 1541656080837,則微信掃一掃會直接回顯這些參數值
* @param codeImgFileSaveDir 二維碼圖片保存的目錄,如 D:/codes
* @param fileName 二維碼圖片文件名稱,帶格式,如 123.png
*/
public static void createCodeToFile(String codeContent, File codeImgFileSaveDir, String fileName) {
try {
if (codeContent == null || "".equals(codeContent)) {
log.info("二維碼內容為空,不進行操作...");
return;
}
codeContent = codeContent.trim();
if (codeImgFileSaveDir == null || codeImgFileSaveDir.isFile()) {
codeImgFileSaveDir = FileSystemView.getFileSystemView().getHomeDirectory();
log.info("二維碼圖片存在目錄為空,默認放在桌面...");
}
if (!codeImgFileSaveDir.exists()) {
codeImgFileSaveDir.mkdirs();
log.info("二維碼圖片存在目錄不存在,開始創建...");
}
if (fileName == null || "".equals(fileName)) {
fileName = new Date().getTime() + ".png";
log.info("二維碼圖片文件名為空,隨機生成 png 格式圖片...");
}
BufferedImage bufferedImage = getBufferedImage(codeContent);
/*
* javax.imageio.ImageIO:java擴展的圖像IO
* write(RenderedImage im, String formatName, File output)
* im:待寫入的圖像, formatName:圖像寫入的格式,output:寫入的圖像文件,文件不存在時會自動創建
*/
File codeImgFile = new File(codeImgFileSaveDir, fileName);
ImageIO.write(bufferedImage, "png", codeImgFile);
log.info("二維碼圖片生成成功:" + codeImgFile.getPath());
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 生成二維碼并輸出到輸出流, 通常用于輸出到網頁上進行顯示
* 輸出到網頁與輸出到磁盤上的文件中,區別在于最后一句 ImageIO.write
* write(RenderedImage im,String formatName,File output):寫到文件中
* write(RenderedImage im,String formatName,OutputStream output):輸出到輸出流中
*
* @param codeContent :二維碼內容
* @param outputStream :輸出流,比如 HttpServletResponse 的 getOutputStream
*/
public static void createCodeToOutputStream(String codeContent, OutputStream outputStream) {
try {
if (codeContent == null || "".equals(codeContent.trim())) {
log.info("二維碼內容為空,不進行操作...");
return;
}
codeContent = codeContent.trim();
BufferedImage bufferedImage = getBufferedImage(codeContent);
/*
* 區別就是以一句,輸出到輸出流中,如果第三個參數是 File,則輸出到文件中
*/
ImageIO.write(bufferedImage, "png", outputStream);
log.info("二維碼圖片生成到輸出流成功...");
} catch (Exception e) {
e.printStackTrace();
log.error("發生錯誤: {}!", e.getMessage());
}
}
private static BufferedImage getBufferedImage(String codeContent) throws WriterException {
/*
* com.google.zxing.EncodeHintType:編碼提示類型,枚舉類型
* EncodeHintType.CHARACTER_SET:設置字符編碼類型
* EncodeHintType.ERROR_CORRECTION:設置誤差校正
* ErrorCorrectionLevel:誤差校正等級,L= ~7% correction、M= ~15% correction、Q= ~25% correction、H= ~30% correction
* 不設置時,默認為 L 等級,等級不一樣,生成的圖案不同,但掃描的結果是一樣的
* EncodeHintType.MARGIN:設置二維碼邊距,單位像素,值越小,二維碼距離四周越近
*/
Map<EncodeHintType, Object> hints = new HashMap();
hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");
hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);
hints.put(EncodeHintType.MARGIN, 1);
/*
* MultiFormatWriter:多格式寫入,這是一個工廠類,里面重載了兩個 encode 方法,用于寫入條形碼或二維碼
* encode(String contents,BarcodeFormat format,int width, int height,Map<EncodeHintType,?> hints)
* contents:條形碼/二維碼內容
* format:編碼類型,如 條形碼,二維碼 等
* width:碼的寬度
* height:碼的高度
* hints:碼內容的編碼類型
* BarcodeFormat:枚舉該程序包已知的條形碼格式,即創建何種碼,如 1 維的條形碼,2 維的二維碼 等
* BitMatrix:位(比特)矩陣或叫2D矩陣,也就是需要的二維碼
*/
MultiFormatWriter multiFormatWriter = new MultiFormatWriter();
BitMatrix bitMatrix = multiFormatWriter.encode(codeContent, BarcodeFormat.QR_CODE, CODE_WIDTH, CODE_HEIGHT, hints);
/*
* java.awt.image.BufferedImage:具有圖像數據的可訪問緩沖圖像,實現了 RenderedImage 接口
* BitMatrix 的 get(int x, int y) 獲取比特矩陣內容,指定位置有值,則返回true,將其設置為前景色,否則設置為背景色
* BufferedImage 的 setRGB(int x, int y, int rgb) 方法設置圖像像素
* x:像素位置的橫坐標,即列
* y:像素位置的縱坐標,即行
* rgb:像素的值,采用 16 進制,如 0xFFFFFF 白色
*/
BufferedImage bufferedImage = new BufferedImage(CODE_WIDTH, CODE_HEIGHT, BufferedImage.TYPE_INT_BGR);
for (int x = 0; x < CODE_WIDTH; x++) {
for (int y = 0; y < CODE_HEIGHT; y++) {
bufferedImage.setRGB(x, y, bitMatrix.get(x, y) ? FRONT_COLOR : BACKGROUND_COLOR);
}
}
return bufferedImage;
}
/**
* 根據本地二維碼圖片解析二維碼內容 注:圖片必須是二維碼圖片,但也可以是微信用戶二維碼名片,上面有名稱、頭像也是可以的)
*
* @param file 本地二維碼圖片文件,如 E:\\logs\\2.jpg
* @return
* @throws Exception
*/
public static String parseQRCodeByFile(File file) {
String resultStr = null;
if (file == null || file.isDirectory() || !file.exists()) {
return resultStr;
}
try {
/*
* ImageIO的BufferedImage read(URL input)方法用于讀取網絡圖片文件轉為內存緩沖圖像
* 同理還有:read(File input)、read(InputStream input)、、read(ImageInputStream stream)
*/
BufferedImage bufferedImage = ImageIO.read(file);
/*
* com.google.zxing.client.j2se.BufferedImageLuminanceSource:緩沖圖像亮度源
* 將 java.awt.image.BufferedImage 轉為 zxing 的 緩沖圖像亮度源
* 關鍵就是下面這幾句:HybridBinarizer 用于讀取二維碼圖像數據,BinaryBitmap 二進制位圖
*/
BufferedImageLuminanceSource source = new BufferedImageLuminanceSource(bufferedImage);
BinaryBitmap bitmap = new BinaryBitmap(new HybridBinarizer(source));
Hashtable hints = new Hashtable();
hints.put(DecodeHintType.CHARACTER_SET, "UTF-8");
/*
* 如果圖片不是二維碼圖片,則 decode 拋異常:com.google.zxing.NotFoundException
* MultiFormatWriter 的 encode 用于對內容進行編碼成 2D 矩陣
* MultiFormatReader 的 decode 用于讀取二進制位圖數據
*/
Result result = new MultiFormatReader().decode(bitmap, hints);
resultStr = result.getText();
} catch (IOException e) {
e.printStackTrace();
} catch (NotFoundException e) {
e.printStackTrace();
log.error("圖片非二維碼圖片, 路徑是: {}!", file.getPath());
}
return resultStr;
}
/**
* 根據網絡二維碼圖片解析二維碼內容, 區別僅僅在于 ImageIO.read(url); 這一個重載的方法)
*
* @param url 二維碼圖片網絡地址,如 https://res.wx.qq.com/mpres/htmledition/images/mp_qrcode3a7b38.gif
* @return
* @throws Exception
*/
public static String parseQRCodeByUrl(URL url) {
String resultStr = null;
if (url == null) {
return resultStr;
}
try {
/*
* ImageIO 的 BufferedImage read(URL input) 方法用于讀取網絡圖片文件轉為內存緩沖圖像
* 同理還有:read(File input)、read(InputStream input)、、read(ImageInputStream stream)
* 如果圖片網絡地址錯誤,比如不能訪問,則 read 拋異常:javax.imageio.IIOException: Can't get input stream from URL!
*/
BufferedImage bufferedImage = ImageIO.read(url);
/*
* com.google.zxing.client.j2se.BufferedImageLuminanceSource:緩沖圖像亮度源
* 將 java.awt.image.BufferedImage 轉為 zxing 的 緩沖圖像亮度源
* 關鍵就是下面這幾句:HybridBinarizer 用于讀取二維碼圖像數據,BinaryBitmap 二進制位圖
*/
BufferedImageLuminanceSource source = new BufferedImageLuminanceSource(bufferedImage);
BinaryBitmap bitmap = new BinaryBitmap(new HybridBinarizer(source));
Hashtable hints = new Hashtable();
/*
* 如果內容包含中文,則解碼的字符集格式應該和編碼時一致
*/
hints.put(DecodeHintType.CHARACTER_SET, "UTF-8");
/*
* 如果圖片不是二維碼圖片,則 decode 拋異常:com.google.zxing.NotFoundException
* MultiFormatWriter 的 encode 用于對內容進行編碼成 2D 矩陣
* MultiFormatReader 的 decode 用于讀取二進制位圖數據
*/
Result result = new MultiFormatReader().decode(bitmap, hints);
resultStr = result.getText();
} catch (IOException e) {
e.printStackTrace();
log.error("二維碼圖片地址錯誤, 地址是: {}!", url);
} catch (NotFoundException e) {
e.printStackTrace();
log.error("圖片非二維碼圖片, 地址是: {}!", url);
}
return resultStr;
}
public class QRCodeController {
@GetMapping("qrCode")
public void getQRCode(String codeContent, HttpServletResponse response) {
System.out.println("codeContent=" + codeContent);
try {
/*
* 調用工具類生成二維碼并輸出到輸出流中
*/
QRCodeUtil.createCodeToOutputStream(codeContent, response.getOutputStream());
log.info("成功生成二維碼!");
} catch (IOException e) {
log.error("發生錯誤, 錯誤信息是:{}!", e.getMessage());
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二維碼生成器</title>
<style type="text/css">
textarea {
font-size: 16px;
width: 300px;
height: 100px;
}
.hint {
color: red;
display: none;
}
.qrCodeDiv {
width: 200px;
height: 200px;
border: 2px solid sandybrown;
}
.qrCodeDiv img {
max-height: 100%;
max-width: 100%;
}
</style>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
var codeContent = $("textarea").val();
console.log(codeContent);
if (codeContent.trim() == "") {
$(".hint").text("二維碼內容不能為空").fadeIn(500);
} else {
$(".hint").text("").fadeOut(500);
$("#codeImg").attr("src", "/qrCode?codeContent=" + codeContent);
}
});
});
</script>
</head>
<body>
<textarea placeholder="二維碼內容..."></textarea><br>
<button>生成二維碼</button>
<span class="hint"></span>
<div class="qrCodeDiv">
<img src="" id="codeImg">
</div>
</body>
</html>
Hutool的是非強制依賴性,因此zxing需要用戶自行引入,我們需要加入依賴。使用hutool的時候,com.google.zxing-javase的依賴可以不需要。
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.3.10</version>
</dependency>
<dependency>
<groupId>com.google.zxing</groupId>
<artifactId>core</artifactId>
<version>3.3.3</version>
</dependency>
QRCodeService其實就是對QrCodeUtil的功能的封裝,QrCodeUtil此處的類是hutool工具提供的,和我們在上面與自己與自己提供的QRCodeUtil類,不是同一個,這個需要注意一下。QrCodeUtil的功能此處主要使用到了的是生成二維碼,到文件或者流之中,QrConfig是Hutool工具QrCodeUtil的配置類。
@Service
@Slf4j
public class QRCodeService {
// 自定義參數,這部分是Hutool工具封裝的
private static QrConfig initQrConfig() {
QrConfig config = new QrConfig(300, 300);
// 設置邊距,既二維碼和背景之間的邊距
config.setMargin(3);
// 設置前景色,既二維碼顏色(青色)
config.setForeColor(Color.CYAN.getRGB());
// 設置背景色(灰色)
config.setBackColor(Color.GRAY.getRGB());
return config;
}
/**
* 生成到文件
*
* @param content
* @param filepath
*/
public void createQRCode2File(String content, String filepath) {
try {
QrCodeUtil.generate(content, initQrConfig(), FileUtil.file(filepath));
log.info("生成二維碼成功, 位置在:{}!", filepath);
} catch (QrCodeException e) {
log.error("發生錯誤! {}!", e.getMessage());
}
}
/**
* 生成到流
*
* @param content
* @param response
*/
public void createQRCode2Stream(String content, HttpServletResponse response) {
try {
QrCodeUtil.generate(content, initQrConfig(), "png", response.getOutputStream());
log.info("生成二維碼成功!");
} catch (QrCodeException | IOException e) {
log.error("發生錯誤! {}!", e.getMessage());
}
}
}
@RestController
@Slf4j
public class QRCodeController {
@Autowired
private QRCodeService qrCodeService;
@GetMapping("qrCode")
public void getQRCode(String codeContent, HttpServletResponse response) {
try {
qrCodeService.createQRCode2Stream(codeContent, response);
log.info("成功生成二維碼!");
} catch (Exception e) {
log.error("發生錯誤, 錯誤信息是:{}!", e.getMessage());
}
}
}
我們使用的頁面和上述相同,所以,頁面的情況是一樣的,效果展示如下:
綜合來說,還是使用hutool的這種方式吧,更加方便簡潔。源代碼在本人springboot2.x-integration項目之中,qrcode分支是二維碼生成的整合分支,歡迎fork和star。
https://blog.csdn.net/xm526489770/article/details/83651555, https://www.cnblogs.com/haha12/p/11457716.html, https://blog.csdn.net/wangmx1993328/article/details/83856391, https://blog.csdn.net/qq_39313596/article/details/103564238, https://www.cnblogs.com/qingmuchuanqi48/p/12079417.html, https://www.bookstack.cn/read/hutool/18a69dd68fd334c8.md
*請認真填寫需求信息,我們會在24小時內與您取得聯系。